the new standalone feature in Angular, is there not a way to provide all CommonModule imports ...
imports: [OtherModule, StandaloneComponent], exports: [DialogComponent, DialogPublicComponent, OtherModule, StandaloneComponent], 假如App 组件 import 了 DialogModule,那 App Template 可以使用 Dialog 组件,DialogPublic 组件,OtherModule export 的组件,和 Standalone 组件。 假如OtherModule 也有 re-export 其...
例如,要在独立组件中使用 Angular 的内置指令(如ngIf和ngFor),可以导入CommonModule: 99 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import{Component}from'@angular/core'; import{CommonModule}from'@angular/common'; @Component({ selector:'app-item-list', standalone:true, imports:[Commo...
对于已有的组件,我们可以在@Component()中添加standalone: true的标识,然后我们可以在没有@NgModule()的情况下直接使用imports导入其他模块了。 如果是新建组件,可以使用ng generate component <name> --standalone的命令,直接创建一个独立组件, 例如: ng generate component button-list --standalone @Component({sel...
1.概述:standalone 时在angular 14版本引入的特性,作用是可以让组件、指令和管道独立。以后就可以独立的直接被引入其他组件,而不依赖 ngmodule 来引入,也可以在路由中实现组件的懒加载。 1.1定义一个standalone组件: //footComponentimport{Component}from'@angular/core';@Component({standalone:true,selector:'app...
你可以在组件或NgModule中直接使用独立的NgOptimizedImage指令: import{NgOptimizedImage}from'@angular/common';// Include it into the necessary NgModule@NgModule({imports:[NgOptimizedImage],})classAppModule{}// ... or a standalone Component@Component({standalone:trueimports:[NgOptimizedImage],})class...
import { CommonModule } from '@angular/common'; import { bootstrapApplication } from '@angular/platform-browser'; @Component({ selector: 'my-app', standalone: true, imports: [CommonModule], template: ` Calculate Area Answer : {{ area() }} Click `, }) export class...
在这种情况下,生成的应用程序将不包含任何 NgModule,ng generate命令默认将生成独立组件,在组件的元数据中有效设置standalone: true: import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-button', ...
import{Component,OnInit}from'@angular/core';import{CommonModule}from'@angular/common';@Component({selector:'app-login',standalone:true,imports:[CommonModule],templateUrl:'./login.component.html',styleUrls:['./login.component.css']})exportclassLoginComponentimplementsOnInit{constructor(){}ngOnInit(...
| [](https://github.com/angular/angular/commit/fde4942cdf5133119b13ed26ee2f6976b787d84c) | throw if standalone components are present in `@NgModule.bootstrap` (#45825) | ...