angular2 不止一个组件错误

标签 angular components

我刚刚将我的 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;
}

切换应用组件:

@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);}
}

最佳答案

问题在于:

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

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

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

关于angular2 不止一个组件错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39097043/

相关文章:

node.js - Angular2点击事件不起作用

angular - 415 Unsupported media Type in http.post Angular 请求

c# - Winforms 中应用程序范围组件应该放在哪里?

delphi - 在 Delphi 7 中调整窗体大小的最佳免费方法是什么?

angular - 在 Angular 5 中正确反序列化日期

javascript - 如何绑定(bind)双向数据以在 Bootstrap 中动态设置滑动切换?

javascript - 如何保护Angular4中的路由

javascript - react 中组件之间通信的正确方式是什么?为什么不到处使用 refs 呢?

components - 尽管状态更新,为什么 vuex 组件没有更新?

JSF 组件绑定(bind) - 一些困惑