angular - 如何从 Angular 14 中的库导入独立组件？

Question

Angular 14 引入了新的独立组件，不需要使用任何模块。如果在库中提供，如何使用这些组件？在标准的非独立组件中，我们首先必须导入给定的模块。 Angular 如何识别我正在导入的组件来自这个特定的包？

Answer 1

要制作独立组件，需要将组件定义为standalone在组件的装饰器中使用 standalone 参数，然后你可以使用 imports组件中的语句也是如此。您的组件将如下所示。

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'example-component',
  template: `./example.component.html`,
})
export class ExampleComponent {}

接下来您需要将该组件导入到其他组件/模块中。您现在可以在 import 属性中将其导入到您的模块中，这在以前是不受支持的。或者您可以将它导入到另一个同样不受支持的组件中，现在是。

// Importing using a Module
@NgModule({
  imports: [ExampleComponent]
})
export class MyModule {}

// Importing using a component
// This component also needs the standalone property
@Component({
  standalone: true,
  imports: [ExampleComponent],
  selector: 'some-component',
  template: `./component.html`,
})
export class ExampleComponent {}