Question

我希望在angular2当前版本（V2.2.0）中使用另一个组件内的组件

但之前我们可以选择使用以下代码在另一个组件中使用组件。

import { AnotherComponent } from './another-component';

@Component({
  selector: 'my-component',
  directives: [AnotherComponent],
  template: '<div>Something there<another></another></div>'
})
export class OtherComponent {
}

但是当我尝试相同时它不起作用会引发模板编译错误。

此功能现已删除吗？要么还有另一种方法吗？

错误消息

如果＆＃39;导航＆＃39;是一个Angular组件，然后验证它是否是该模块的一部分。

如果＆＃39;导航＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;这个组件   压制此消息。（＆＃34;

Answer 1

您必须在声明

中的父模块中添加AnotherComponent

declarations: [
  AnotherComponent 
]

Answer 2

制作包含所有组件的文件

import {
    LoginComponent
} from './loginComponent/login.component';
import {
    adduserComponent
} from './core/adduserComponent/adduser.component';
import {
    TemplateComponent
} from './core/template.component';
import {
    DashboardComponent
} from './core/dashboard/dashboard';
import {
   HeadComponent
} from './core/headComponent/head.component';


export const ALL_DECLARATIONS = [
    LoginComponent,
    adduserComponent,
    TemplateComponent,
    HeadComponent,
    ChangeHeadComponent
];

并在父模块文件中导入ALL_DECLARATIONS

import { ALL_DECLARATIONS } from './filename';

并使用

    @NgModule({
        imports: [
            BrowserModule,
            FormsModule,
            ReactiveFormsModule,
            RouterModule.forRoot(routes),
        ],
        declarations: [
            AppComponent,
            ...ALL_DECLARATIONS
        ],
        providers: [
            ...ROUTES_PROVIDERS
        ],
        bootstrap: [
            AppComponent
        ]
    })
export class AppModule {}

使用Spread Operator，因此您不必导入模块文件中的所有组件文件

let cde = ['c', 'd', 'e'];
let scale = ['a', 'b', ...cde, 'f', 'g'];  // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

我们可以在当前版本的Angular2中使用另一个组件内的组件吗？

2 个答案: