typescript - Angular 4: Om det finns flera komponenter med samma selektor, hur laddar man bara en komponent baserat på något villkor?

Huvudkomponent:

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

Komponent 1:

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

Komponent2 :

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

Finns det något sätt i Angular 4, genom vilket baserat på någon viss villkor vilken komponent (komponent 1 eller 2) som kommer att laddas i "huvudkomponenten" baserat på något villkor?

Svar #1

Det finns inget sätt att göra det. Väljare måste vara unika för alla komponenter och direktiv som deklareras inom och importeras till ett enda NgModule.

Om du äger koden, skapa bara inte konfliktande selektorer.

Om importerade tredjepartsmoduler har komponenter med konfliktande selektorer,
kan du kapsla in en konfliktande komponent i en annan komponent med en icke-konfliktande selektor och lägga till den i sin egen modul. Sedan kan du specificera i @NgModule({imports: [...]}) vilken komponent som ska användas.

Då kan du bara använda *ngIf

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

Relaterade artiklar