如何在 angular 中包含库项目

Question

我对 angular 库项目有疑问。我需要使用全局样式表来设计一个项目，但只影响它自己。我尝试创建一个包含 css 文件到主 css 文件的组件。但它不能正常工作。这是 ts 文件的示例。

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lib-organization',
  templateUrl: './organization.component.html',
  styleUrls: ['./organization.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class OrganizationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log('Hello World');
  }

}

还有我的库项目模块：

import { NgModule } from "@angular/core";
import { GeneralConditionComponent } from "./components/contract/general-condition.component";
import { TransmissionConditionComponent } from "./components/contract/transmission-condition.component";
import { CompanyDetailComponent } from "./components/company/company-detail.component";
import { CompanyListComponent } from "./components/company/company-list.component";
import { RouterModule } from "@angular/router";
import { ConfigurationComponent } from "./components/configuration/configuration.component";
import { SalaryProgrammComponentComponent } from './components/salary-programm-component/salary-programm-component.component';
import { BrowserModule } from "@angular/platform-browser";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OrganizationComponent } from "./organization.component";

@NgModule({
  declarations: [
    GeneralConditionComponent,
    TransmissionConditionComponent,
    CompanyDetailComponent,
    CompanyListComponent,
    ConfigurationComponent,
    SalaryProgrammComponentComponent,
    OrganizationComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: "list",
        component: CompanyListComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
      {
        path: "configuration",
        component: ConfigurationComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
      {
        path: "contract/general-condition",
        component: GeneralConditionComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
      {
        path: "contract/transmission-condition",
        component: TransmissionConditionComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
    ]),
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [SalaryProgrammComponentComponent, FormsModule, ReactiveFormsModule, OrganizationComponent],
  bootstrap: [OrganizationComponent],

})
export class OrganizationModule {}

这是我的项目结构的一些屏幕：

我做错了什么？

Answer 1

我想通了。我刚刚将我的库项目模块配置为

RouterModule.forChild([
      {
        path: '',
        component: OrganizationComponent,
        children: [
          {
            path: "list",
            component: CompanyListComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
          {
            path: "configuration",
            component: ConfigurationComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
          {
            path: "contract/general-condition",
            component: GeneralConditionComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
          {
            path: "contract/transmission-condition",
            component: TransmissionConditionComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
        ]
      }
    ]),

如何在 angular 中包含库项目

How to include library project in angular

stylesheet

typescript

angular

angular7