कोणीय 2 में विज़ार्ड लागू करें?

Question

मुझे कोणीय 2 में विज़ार्ड को लागू करने की आवश्यकता है। और मेरे पास एक विचार है लेकिन मुझे नहीं पता कि कैसे कार्यान्वित किया जाए। यह मेरा विचार है:

मैं एक component बनाना चाहता हूं, यह सामान्य घटक होगा। चरणों और अगला/पीछे बटन के साथ। इस

@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'} 
     ]; 
    } 
} 

और फिर हर घटक का विस्तार होगा प्रपत्र WizardComponent की तरह, फिर से उपयोग सभी HTML और अगले/वापस कार्य करने के लिए। ऐसा कुछ।

मेरे लिए कोई समाधान, धन्यवाद।

Answer 1

हेल्पर हर कदम

०१२३५१६४१०६१ के लिए 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() {} 
} 

कुछ उदाहरण घटकों का उपयोग का उपयोग कर घटकों को जोड़ने के लिए `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(); 
    } 
} 

आपका विज़ार्ड घटक

@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 { 
} 

यह सब एक साथ

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

ऐसा ही एक उपयोग के मामले (एक Plunker उदाहरण के साथ) Angular 2 dynamic tabs with user-click chosen components

नहीं