как использовать ngtemplate в Ioni c 4 - PullRequest
Новая
       28

как использовать ngtemplate в Ioni c 4

0 голосов
/ 22 апреля 2020

Я пытаюсь реализовать NgTemplate в ioni c с двухсторонним связыванием, но я не могу сделать это в Ioni c. Я пытаюсь сделать это в Ioni c, он не работает, но работает хорошо с Angular. Как это сделать в Ioni c? Пожалуйста, предложите

Вот мой фрагмент кода:

Компонент 1: 

@Component({
  selector: 'component1',
  template: `      

  <ng-template #defaultTabButtons>

      <button class="tab-button" (click)="login()">{{loginText}}</button>

      <button class="tab-button" (click)="signUp()">{{signUpText}}</button>

  </ng-template>



  <div class="lessons-list" *ngIf="lessons else loading">
      <div class="lessons-list">
          {{lessons }}
      </div>
  </div>


  <ng-template [ngIf]="lessons" [ngIfElse]="loading">
      <div class="lessons-list">

      </div>
  </ng-template>


  <ng-template #loading > 
      <div>Loading</div>
  </ng-template>


  <ng-template #estimateTemplate let-lessonsCounter="estimate">
      <div> Approximately {{lessonsCounter}} lessons ...</div>
  </ng-template>


  <ng-container *ngTemplateOutlet="loading"></ng-container>

  <ng-container *ngTemplateOutlet="estimateTemplate; context: templateCtx"></ng-container>


  <!-- div class="lessons-list" *ngIf="lessons" *ngFor="let lesson of lessons">
      <div class="lessons-list">
          {{lesson | json}}
      </div>
  </div -->

  <ng-container *ngIf="lessons">
      <div class="lesson" *ngFor="let lesson of lessons">
          <div class="lesson-detail">
              {{lesson | json}}
          </div>
      </div>
  </ng-container>
  <ng-template #customTabButtons>
      <div class="custom-class">
          <button class="tab-button" (click)="login()">{{loginText}}</button>
          <button class="tab-button" (click)="signUp()">{{signUpText}}</button>
      </div>
  </ng-template>

  <tab-container [headerTemplate]="defaultTabButtons"></tab-container>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'NPVAngular';
  loginText = 'Login';
  signUpText = 'Sign Up';
  lessons = ['Lesson 1', 'Lessons 2'];
  totalEstimate = 10;
  templateCtx = {estimate: this.totalEstimate};

}

Компонент 2: 

@Component({
    selector: 'tab-container',
    template: `

<ng-template #defaultTabButtons>
    <div class="default-tab-buttons">
    </div>
</ng-template>
<ng-container 
        *ngTemplateOutlet="headerTemplate ? headerTemplate: defaultTabButtons">
</ng-container>
    `})
export class TabContainerComponent implements OnInit {

    @Input()
    headerTemplate: TemplateRef<any>;
}

Пожалуйста, предложите! Спасибо

...