Angular 4：如果有多个组件具有相同的选择器，如何根据某些条件仅加载一个组件？

Question

主要组成部分：

@Component({
    selector: 'app-root',
    template: '<app-report></app-report>'
})

组件1：

@Component({
    selector: 'app-report',
    templateUrl: './trip.report.html'
})

组件2：

@Component({
    selector: 'app-report',
    templateUrl: './user.report.html'
})

在角度4中是否有任何方式，基于某些条件，哪个组件（组件1或2）将被加载到＆＃34;主要组件＆＃34;根据某些条件？

Answer 1

没有办法做到这一点。对于在单个NgModule内声明并导入的所有组件和指令，选择器必须是唯一的。

如果您拥有代码，请不要创建有冲突的选择器。

如果导入的第三方模块的组件具有冲突的选择器，则 您可以使用非冲突选择器将另一个组件中的冲突组件包装起来并将其添加到它自己的模块中。 然后，您可以在@NgModule({imports: [...]})中指定应使用哪个组件。

然后你可以使用*ngIf

<conflicting-component *ngIf="foo"></conflicting-component>
<de-conflicted-wrapper *ngIf="!foo"></de-conflicted-wrapper>