Implementazione guidata in angular2?

Question

Devo implementare la procedura guidata in angular2. E ho un'idea ma non so come implementarla. Questa è la mia idea:

Voglio creare uno component, sarà un componente comune. Con passaggi e pulsante Avanti/Indietro. Ti piace questa

@Component({ 
    selector: 'div', 
    providers: [], 
    template: ' <ul class="steps"> 
     <li *ngFor="#step of steps; #i = index" class="steps-item"> 
      <a href="#" class="steps-link" [attr.value]="step.value">{{step.name}}</a> 
     </li> 
    </ul> 
    <form > 
     <template></template> 
     <div> 
      <button type="button">Back</button> 
      <button type="submit">Submit</button> 
     </div> 
    </form>', 
    pipes: [TranslatePipe], 
    directives: [] 
}) 

export class WizardComponent { 
    steps: any; 

    constructor() { 
     this.steps = [ 
      {'name': 'step 1', 'value': '1'}, 
      {'name': 'step 2', 'value': '2'}, 
      {'name': 'step 3', 'value': '3'} 
     ]; 
    } 
} 

E poi tutti i componenti si estenderà modulo WizardComponent, di riutilizzare tutti HTML e funzione successiva/indietro. Qualcosa del genere.

Qualsiasi soluzione per me, grazie.

Answer 1

Helper aggiungere i componenti utilizzando `ngFor

export class DclWrapper { 
    @ViewChild('target', {read: ViewContainerRef}) target; 
    @Input() type; 
    cmpRef:ComponentRef; 
    private isViewInitialized:boolean = false; 

    constructor(private dcl:DynamicComponentLoader) {} 

    updateComponent() { 
    // should be executed every time `type` changes but not before `ngAfterViewInit()` was called 
    // to have `target` initialized 
    if(!this.isViewInitialized) { 
     return; 
    } 
    if(this.cmpRef) { 
     throw 'currently changing type after the component was added is not supported' 
    } 
    this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => { 
     this.cmpRef = cmpRef; 
    }); 
    } 

    ngOnChanges() { 
    this.updateComponent(); 
    } 

    ngAfterViewInit() { 
    this.isViewInitialized = true; 
    this.updateComponent(); 
    } 
} 

Il componente procedura guidata utilizzando il componente DclWrapper

@Component({ 
    selector: 'my-wiz', 
    providers: [], 
    template: ' <ul class="steps"> 
     <li *ngFor="#step of steps; #i = index" class="steps-item"> 
      <dcl-wrapper [type]="step"></dcl-wrapper> 
     </li> 
    </ul> 
    <form > 
     <template></template> 
     <div> 
      <button type="button">Back</button> 
      <button type="submit">Submit</button> 
     </div> 
    </form>', 
    pipes: [TranslatePipe], 
    directives: [DclWrapper] 
}) 
export class WizardComponent { 
    @Input() steps; 

    constructor() {} 
} 

Alcuni componenti di esempio per ogni fase

012.351.641,061 mila

@Component({ 
    selector: 'step1', 
    template: `<h2>step1</h2>` 

}) 
export class Step1 { 
} 

@Component({ 
    selector: 'step2', 
    template: `<h2>step2</h2>` 

}) 
export class Step2 { 
} 

@Component({ 
    selector: 'step3', 
    template: `<h2>step3</h2>` 

}) 
export class Step3 { 
} 

Utilizzando tutto insieme

@Component({ 
    selector: 'my-app', 
    directives: [Tabs] 
    template: ` 
    <h2>Hello {{name}}</h2> 
    <my-wiz [steps]="steps"></my-tabs> 
` 
}) 
export class App { 
    Steps = [Step1, Step2, Step3]; 
} 

Un caso d'uso simile (con un esempio Plunker) Angular 2 dynamic tabs with user-click chosen components