Componente angolare 2 con più viste

Question

Come è possibile assegnare una vista a più componenti Angular 2 \ view templates?

Devo utilizzare il contenuto di ng? Quale non è esattamente la funzione che voglio. Forse una proprietà del componente che specifica l'url del modello, ma come modificare la view \ template nella classe del componente?

Answer 1

Il ng contenuto deve essere utilizzato per definire dove si desidera che il contenuto del componente di andare, segue la spiegazione:

che hai definito un componente personalizzato con il suo modello e un selettore 'my-cmp', se lo si utilizza come tale: <my-cmp><div>content</div></my-cmp>, il div all'interno del componente deve andare da qualche parte, questo è ciò che si definisce nel modello quando si implementa my-cmp. Dì: <h1>my component title</h1><ng-content></ng-content> il tuo div andrà dove viene inserito il contenuto di ng.

Ora, se si desidera avere più visualizzazioni, credo che sia un problema di progettazione e molto probabilmente si tratterebbe di due componenti diversi, quindi un contenitore padre li contenerli entrambi. Questo contenitore genitore potrebbe comunicare con il servizio e fornire ai componenti figlio il modello di cui hanno bisogno per essere visualizzati. Potrebbero emettere un evento quando l'utente fa qualcosa, che il genitore cattura, attiva una chiamata di servizio e invia loro il modello aggiornato attraverso l'associazione dei dati.

Oppure, se si desidera visualizzare uno o l'altro, può essere gestito con percorsi?

O un ultimo modo sarebbe un ng-se, se si ha un certo stato nel modello, allora si visualizza un componente figlio, altrimenti si visualizza l'altro.

Se sei un po 'più specifico riguardo al bisogno che hai, posso prendere in giro un po' di codice.

Answer 2

Ecco come ho gestito, anche se non amo la soluzione:

• Ho un componente myComponent che rende a selector: 'my-component'.
• Nella mia app principale, creo due variabili target:string = 'template-one' e target2:string = 'template-two'.
• Creo due istanze del componente nel modello di app che assomiglia a <my-component [target]="target"></my-component> e <my-component [target]="target2"></my-component>.
• Infine, nel modello per my-component, ho due diversi blocchi di markup, il primo destinato a quando target === "template-one" e il secondo a target === "template-two". Sull'elemento html esterno per uno ho inserito *ngIf="target === 'template-one'" e sull'elemento html esterno per l'altro ho inserito *ngIf="target === 'template-two'" che crea effettivamente un fork nel rendering.

Posso postare indietro se trovo qualcosa di meglio, ma per ora questo è il meglio che potrei fare con ciò che Angular 2 mi ha dato.

Answer 3

Oggi pensa anche a questo problema. "Invento" questa soluzione http://plnkr.co/edit/FYVwbBwSnqWRcvAVz3wh?p=preview. Potrebbe esserti d'aiuto in futuro.

export class MyModel { 
    lala; 
    constructor() { 
    this.lala = "llaala"; 
    } 
    appendToLala(param: string){ 
    this.lala += param; 
    } 
} 

@Component({ 
    selector: 'c1', 
    template: `<div><h2>Hello {{lala}}</h2></div>`, 
}) 
export class Component1 extends MyModel { 
    constructor(){ 
    super(); 
    this.appendToLala(" bebebe"); 
    } 
} 


@Component({ 
    selector: 'c2', 
    template: `<div><h2>Hello {{lala}}</h2></div>`, 
}) 
export class Component2 extends MyModel { 
    constructor(){ 
    super(); 
    this.appendToLala(" nenene"); 
    } 
} 

L'idea è di creare un modello di componente astratto e utilizzarlo come genitore di @ Component. E se necessario, puoi creare un albero dai modelli e la classe @Component sarà sempre una foglia in questo albero.

Answer 4

Non sicuro se NG2 ha un modo integrato per supportare questo.

Sembra che tu abbia bisogno di due componenti, ma ne hai uno e cerchi di trovare il modo più veloce. Ma la soluzione migliore sarà dividere la logica complicata in diverse strutture (come servizi, altri moduli, ecc.). Il modo migliore per rendere la struttura che sarà confortevole con cui lavorare. E quando costruisci questa struttura, non avrai bisogno di più html per la direttiva.