Пользовательский угловой модуль 2+ Stepper - PullRequest
Новая
       14

Пользовательский угловой модуль 2+ Stepper

0 голосов
/ 24 октября 2019

В начале я хотел бы сказать, что я знаю, что готов использовать степпер из CDK или Материалы, но я хотел бы создать «свой» для изучения угловых 8.

Чтобы бытьЧестно говоря, я не знаю, где мне искать помощь сейчас, поэтому я решил написать здесь. Может быть, кто-нибудь даст мне несколько советов, и в конце я опубликую свою работу.

Итак, начнем: Индексный HTML-код выглядит так: 

<stepper>
<step>
    <ng-template step-label>First name</ng-template>
    <input placeholder="First name" required>
    <div>
        <button >Next</button>
    </div>
</step>
<step>
    <ng-template step-label>Last name</ng-template>
    <input placeholder="Last name" required>
    <div>
        <button >Next</button>
    </div>
</step>
<step>
    <ng-template step-label>Address name</ng-template>
    <input placeholder="Address" required>
    <div>
        <button >Next</button>
    </div>
</step>
</stepper>

Компоненты + директива 

@Directive({selector: '[step-label]'})
export class StepLabel{
    constructor(public template: TemplateRef<any>){};
}

@Component({selector: 'step-header', templateUrl: 'step-header.html'})
export class StepHeader{ 

    @Input() label: TemplateRef<StepLabel>;
}

@Component({
    selector: 'step',
    template: '<ng-template><ng-content></ng-content></ng-template>'
})
export class Step{ 

    @ViewChild(TemplateRef, {static: true}) content: TemplateRef<Step>;
    @ContentChild(StepLabel, {static: true}) label: TemplateRef<StepLabel>;

}

@Component({selector: 'stepper', templateUrl: './stepper.html'})
export class Stepper implements AfterContentInit {
    stepsArray = [];
    @ContentChildren(Step) steps: QueryList<Step>;

    ngAfterContentInit() {
        this.stepsArray = this.steps.toArray();
    }
}

stepper.html 

 <div class="header-steps" style="bordeR: 1px solid green; padding: 10px;">
    <ng-container *ngFor="let step of stepsArray; let i = index; let isLast = last">
        <step-header [label]="step.label"></step-header>
    </ng-container>
</div>

<div style="border: 1px solid blue; padding: 5px; margin: 5px;" class="content-steps">      
    <div *ngFor="let step of stepsArray; let i = index">
        <ng-container *ngIf="step" [ngTemplateOutlet]="step.content"></ng-container>
    </div>
</div>

step = header.html 

<div class="step-label">
  <ng-container *ngIf="label" [ngTemplateOutlet]="label.template"></ng-container>
</div>

Я обновил весь «базовый» проект. Оно работает. У меня есть один вопрос. Почему в директиве StepLabel должен быть конструктор. Я пытался добавить что-то вроде этого: 

@ViewChild(TemplateRef, {static: true}) template: TemplateRef<StepLabel>;

, но это не работает.

1 Ответ

1 голос
/ 24 октября 2019

В шаблоне компонента вашего шага оберните ng-content в ng-template 

template: '<ng-template><ng-content></ng-content></ng-template>'

И затем получите шаблон, используя ViewChild

@ViewChild(TemplateRef, { static: true }) content: TemplateRef<any>;

В конце вы получите что-токак: 

@Component({
    selector: 'step',
    template: '<ng-template><ng-content></ng-content></ng-template>'
})
export class Step { 
    @ViewChild(TemplateRef, { static: true }) content: TemplateRef<any>;
}
...