angular2 多于一个组件错误答案

【问题标题】：angular2 More than one component errorangular2 多于一个组件错误
【发布时间】：2016-12-30 00:55:27
【问题描述】：

我只是将我的 ng2 应用程序从 rc.4 升级到 rc.5。我的 app.html 中的内容是：

<div>
    <switch-app [account]="cache.accountInfo" [app]="cache.current_app">
    <router-outlet></router-outlet>
</div>

我在 app.module.ts 中声明了 SwitchAppComponent：

@NgModule({
    imports: [
    ]
    declarations: [
        SwitchAppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

那么这个错误就发生了：

More than one component: AppComponent,SwitchAppComponent

[ERROR ->]<switch-app [account]="cache.accountInfo" [app]="cache.current_app"></switch-app>

我检查了我的应用，AppComponent 和 SwitchAppComponent 的选择器是不同的。

这里是两个组件的简要代码：应用组件：

@Component({
    selector: '[app]',
    styleUrls: ['./app.css', './custom.scss'],
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.html'
})
export class AppComponent extends CommonComponent implements OnInit {

    cache = cache;
}

switch-app 组件：

@Component({
    selector: 'switch-app',
    templateUrl: './switch-app.html'
})
export class SwitchAppComponent implements OnInit {
    @Input('app') app;
    @Input('account') account;
    ngOnInit() { console.log(this.account, this.app);}
}

【问题讨论】：

我发现了问题，因为我用属性 [app] 声明了我的 AppComponent，但是当我将 switch-app 组件插入其中时，我使用 [app] 属性作为它的输入。只要我改变switch-app的[app] attr，一切都是正确的

标签： angular components

【解决方案1】：

问题出在：

 <switch-app [account]="cache.accountInfo" [app]="cache.current_app"></switch-app>

这匹配switch-app 选择器和[app] 选择器，两者都是组件的选择器。 Angular 不能在同一个元素上使用 2 个组件。

不确定您要在这里做什么，也许一个组件应该是一个指令？

【讨论】：