Angular 角度6步进模块生成_Angular

Angular 角度6步进模块生成

angular

Angular 角度6步进模块生成,angular,Angular,我需要专家的帮助 app.component.html <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&g

我需要专家的帮助

app.component.html

  <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>

<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 content</div>
      </div>
    </div>
  </div>
  <div class="ui segment" *ngFor="let item of steps">
    <!--

    @========================================
        HERE IS A Quotation

        I need to inject only one step component content that match the condition Stepper.activeStep == step.sid

Note : Please I do not want to use ng-template in app.component.html :)

     @========================================
    -->

  </div>
</div>


iam步骤1
iam步骤1
iam步骤1
iam步骤1

step.component.ts

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

  constructor() { }

  ngOnInit() {
  }

}

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

}

  //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() {
          }

        }

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

}

@组件({
选择器：“应用程序步骤”，
templateUrl:``，
样式：[]
})
导出类StepComponent实现OnInit{
@输入（'sid'）
公共sid:编号
构造函数（）{}
恩戈尼尼特（）{
}
}

步进电机

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

  constructor() { }

  ngOnInit() {
  }

}

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

}

  //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() {
          }

        }

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

}

@组件({
选择器：“应用程序步进器”，
templateUrl:'./stepper.component.html'，
样式：[]
})
导出类StepperComponent实现OnInit{
@输入（'activeStep'）
public-activeStep:number=0；
@ContentChildren（StepComponent）
公共步骤：查询列表；
构造函数（）{}
恩戈尼尼特（）{
}
}

stepper.component.html

  <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>

<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 content</div>
      </div>
    </div>
  </div>
  <div class="ui segment" *ngFor="let item of steps">
    <!--

    @========================================
        HERE IS A Quotation

        I need to inject only one step component content that match the condition Stepper.activeStep == step.sid

Note : Please I do not want to use ng-template in app.component.html :)

     @========================================
    -->

  </div>
</div>


考试题目
测试内容

如stepper.component.html中所述

  <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>

<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 content</div>
      </div>
    </div>
  </div>
  <div class="ui segment" *ngFor="let item of steps">
    <!--

    @========================================
        HERE IS A Quotation

        I need to inject only one step component content that match the condition Stepper.activeStep == step.sid

Note : Please I do not want to use ng-template in app.component.html :)

     @========================================
    -->

  </div>
</div>

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

及

我不想在app.component.html中使用ng模板

  <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>

<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 content</div>
      </div>
    </div>
  </div>
  <div class="ui segment" *ngFor="let item of steps">
    <!--

    @========================================
        HERE IS A Quotation

        I need to inject only one step component content that match the condition Stepper.activeStep == step.sid

Note : Please I do not want to use ng-template in app.component.html :)

     @========================================
    -->

  </div>
</div>

谢谢大家，并向你们致以最良好的祝愿

谢谢大家，这就是我想要的

app.component.html（无更改）

step.component.ts

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

  constructor() { }

  ngOnInit() {
  }

}

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

}

  //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() {
          }

        }

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

}

//模板是第一个更改
@组成部分({
选择器：“应用程序步骤”，
模板：`
`,
样式：[]
})
导出类StepComponent实现OnInit{
@输入（'sid'）
公共sid:编号
//此处更改（添加）
@ViewChild（TemplateRef）
公共主模板：ElementRef
构造函数（）{}
恩戈尼尼特（）{
}
}

步进电机

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

  constructor() { }

  ngOnInit() {
  }

}

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

}

  //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() {
          }

        }

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

}

@组件({
选择器：“应用程序步进器”，
templateUrl:'./stepper.component.html'，
样式：[]
})
导出类StepperComponent实现OnInit{
@输入（'activeStep'）
public-activeStep:number=0；
@ContentChildren（StepComponent）
公共步骤：查询列表；
构造函数（）{}
恩戈尼尼特（）{
}
//这是零钱（添加）
public get ActiveStepComponent（）：StepComponent{
返回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>


考试题目
测试连接