Question

我需要Angular专家的帮助

app.component.html

seq_params

step.component.ts

  <app-stepper [activeStep]="0">
    <app-step [sid]="0">
      <div>iam step 1</div>
    </app-step>
    <app-step [sid]="1">
      <div>iam step 1</div>
    </app-step>
    <app-step [sid]="2">
      <div>iam step 1</div>
    </app-step>
    <app-step [sid]="3">
      <div>iam step 1</div>
    </app-step>
  </app-stepper>

stepper.component.ts

@Component({
  selector: 'app-step',
  templateUrl: `<ng-content></ng-content>`,
  styles: []
})
export class StepComponent implements OnInit {
  @Input('sid')
  public sid: number

  constructor() { }

  ngOnInit() {
  }

}

stepper.component.html

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styles: []
})
export class StepperComponent implements OnInit {
  @Input('activeStep')
  public activeStep: number = 0;

  @ContentChildren(StepComponent)
  public steps: QueryList<StepComponent>;

  constructor() { }

  ngOnInit() {
  }

}

如stepper.component.html

中所述

我只需要注入符合条件Stepper.activeStep == step.sid的一个步骤组件内容

和

我不想在app.component.html中使用ng-template

感谢所有最良好的祝愿

Answer 1

感谢所有我想要的东西

app.component.html（不变）

step.component.ts

  //Templete is FirstChange
        @Component({
          selector: 'app-step',
          template: `
                  <ng-template>
                     <div class="ui attached segment">
                           <ng-content></ng-content>
                     </div>
                  </ng-template>
        `,
          styles: []
        })
        export class StepComponent implements OnInit {
          @Input('sid')
          public sid: number

// here change (adding)
          @ViewChild(TemplateRef)
          public masterTemplete: ElementRef

          constructor() { }

          ngOnInit() {
          }

        }

stepper.component.ts

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styles: []
})
export class StepperComponent implements OnInit {

  @Input('activeStep')
  public activeStep: number = 0;

  @ContentChildren(StepComponent)
  public steps: QueryList<StepComponent>;

  constructor() {  }

  ngOnInit() {

  }

//here is change (adding)
  public get ActiveStepComponent(): StepComponent {
    return this.steps.filter(x => x.sid == this.activeStep)[0]
  } 

}

stepper.component.html

<div class="segment ui">
  <div class="ui top attached steps" [class.one]="steps.length == 1" [class.two]="steps.length == 2" [class.three]="steps.length == 3" [class.four]="steps.length == 4" [class.five]="steps.length == 5">
    <div class="step" *ngFor="let item of steps">
      <i class="industry icon"></i>
      <div class="content">
        <div class="title">test title</div>
        <div class="description">test conntent</div>
      </div>
    </div>
  </div>

  <!-- HERE IS CHANGE WHAT I WANT -->
  <template *ngTemplateOutlet="ActiveStepComponent.masterTemplete">
  </template>
  <!-- HERE IS CHANGE WHAT I WANT -->

</div>

Angular 6步进模块生成

1 个答案: