Question

我有一个导航栏组件，一个内容组件和一个将两者连接的父组件。每当我单击导航栏中的列表项时，内容组件就会通过将布尔值更改为false / true来显示不同的内容。效果很好，但是当我尝试通过更改@Input变量的值来更改内容组件的内容时，此操作将无效。

nav-admin.html

<div id="nav">
  <ul class="navElement">
    <li (click)="changeComponent('nutzerverwaltung')">Nutzerverwaltung</li>
    <li (click)="changeComponent('branchenverwaltung')">Branchenverwaltung</li>
    <li (click)="changeComponent('tarifverwaltung')">Tarifverwaltung</li>
    <li (click)="changeComponent('statistiken')">Statistiken/Infos</li>
  </ul>
</div>

nav-admin.ts

  @Output() nutzerverwaltung = new EventEmitter<boolean>();
  @Output() branchenverwaltung = new EventEmitter<boolean>();
  @Output() tarifverwaltung = new EventEmitter<boolean>();
  @Output() statistiken = new EventEmitter<boolean>();
  @Output() changeBranchen = new EventEmitter<boolean>();
  @Output() addOrEditUser = new EventEmitter<boolean>();


  changeComponent(component: string): void{
    if(component==='nutzerverwaltung')
    {
      this.nutzerverwaltung.emit(true);
      this.branchenverwaltung.emit(false);
      this.tarifverwaltung.emit(false);
      this.statistiken.emit(false);
      this.changeBranchen.emit(false);
      this.addOrEditUser.emit(false);
    }
    else if(component==='branchenverwaltung')
    {
      this.branchenverwaltung.emit(true);
      this.nutzerverwaltung.emit(false);
      this.tarifverwaltung.emit(false);
      this.statistiken.emit(false);
      this.changeBranchen.emit(false);
      this.addOrEditUser.emit(false);
    }
    ....

parent.html

<app-nav-admin
  (branchenverwaltung)="Pbranchenverwaltung=$event"
  (nutzerverwaltung)="Pnutzerverwaltung=$event"
  (tarifverwaltung)="Ptarifverwaltung=$event"
  (statistiken)="Pstatistiken=$event"
  (changeBranchen)="PchangeBranchen=$event"
  (addOrEditUser)="PaddOrEditUser=$event"
  [@slideMenu]="isVisible ? true : false"></app-nav-admin>
<app-main-admin
  [branchenverwaltung]="Pbranchenverwaltung"
  [nutzerverwaltung]="Pnutzerverwaltung"
  [tarifverwaltung]="Ptarifverwaltung"
  [statistiken]="Pstatistiken"
  [changeBranchen]="PchangeBranchen"
  [addOrEditUser]="PaddOrEditUser"
></app-main-admin>

parent.ts

  Pbranchenverwaltung: boolean;
  Pnutzerverwaltung: boolean;
  Ptarifverwaltung: boolean;
  Pstatistiken: boolean;
  PchangeBranchen: boolean;
  PaddOrEditUser: boolean;

main-admin.html（内容组件）

<ng-container *ngIf="nutzerverwaltung">
  <button class="btnAddUser" (click)="addOrEditUserClicked()">+</button>
  <table class="userTable">
    <tr *ngFor="let user of users">
      <td class="tableGrid">{{user.id}}</td>
      <td class="tableGrid">{{user.vorname}}</td>
      <td class="tableGrid">{{user.nachname}}</td>
      <td class="tableGrid">{{user.telefonnummer}}</td>
      <td class="tableGrid">{{user.email}}</td>
      <td class="tableGrid" style="padding: 0">
        <button id="btnConfigureUser" (click)="addOrEditUserClicked()">
          Bearbeiten
        </button>
      </td>
    </tr>
  </table>
</ng-container>
<ng-container *ngIf="addOrEditUser">
...
</ng-container>
...

main-admin.ts（内容组件）

  @Input() branchenverwaltung: boolean;
  @Input() nutzerverwaltung: boolean;
  @Input() tarifverwaltung: boolean;
  @Input() statistiken: boolean;
  @Input() changeBranchen: boolean;
  @Input() addOrEditUser: boolean;
  addOrEditUserClicked(){
    this.branchenverwaltung = false;
    this.nutzerverwaltung = false;
    this.tarifverwaltung = false;
    this.statistiken = false;
    this.changeBranchen = false;
    this.addOrEditUser = true;
    //doesn't work
  }

我试图只显示一个，但是每当我在内容组件中更改@Input变量的值时，它都不会覆盖该值。然后显示出Multiple，因为多个布尔值是正确的。

Answer 1

基本上@Input装饰器仅用于将从另一个组件接收的数据。就像您在决定在内容组件中对其进行更改之前一样。

您可以在Content Component中创建新变量，这些新变量将在HTML中与@Inputs相同通常情况下，它们将等于@Input变量，并且当您想要更改其某些值（例如在addOrEditUserClicked（）方法中）时，您会再次更改本地变量（因为它们现在已在HTML中使用）。

示例：main-admin.ts（内容组件）

  @Input() branchenverwaltung: boolean;
  @Input() nutzerverwaltung: boolean;
  @Input() tarifverwaltung: boolean;
  @Input() statistiken: boolean;
  @Input() changeBranchen: boolean;
  @Input() addOrEditUser: boolean;

  // Use these in HTML
  let branchenverwaltungLocal: boolean;
  let  nutzerverwaltungLocal: boolean;
  let  tarifverwaltungLocal: boolean;
  let  statistikenLocal: boolean;
  let  changeBranchenLocal: boolean;
  let  addOrEditUserLocal: boolean;

ngOnInit() {
    this.branchenverwaltungLocal= this.branchenverwaltung;
    this.nutzerverwaltungLocal= this.nutzerverwaltung;
    this.tarifverwaltungLocal= this.tarifverwaltung;
    this.statistikenLocal= this.statistiken;
    this.changeBranchenLocal= this.changeBranchen;
    this.addOrEditUserLocal= this.addOrEditUser;
}

  addOrEditUserClicked(){
    this.branchenverwaltungLocal= false;
    this.nutzerverwaltungLocal = false;
    this.tarifverwaltungLocal = false;
    this.statistikenLocal = false;
    this.changeBranchenLocal = false;
    this.addOrEditUserLocal = true;
  }

另一个提示是从OnChanges界面使用ngOnChanges方法。这样，如果@Input值由于父组件的某些原因而改变，您将收到新值。否则，您将只有最初的一个（如果有的话）

在某些情况下，如果您要从父组件接收新的@Input（不是您在本组件中对它们的更改，而是从父组件）示例2：

ngOnChanges(changes: SimpleChanges) {
if (changes) {
    if (changes['branchenverwaltung'] && changes['branchenverwaltung'].currentValue !== '') {
       this.branchenverwaltungLocal= this.branchenverwaltung;
    }
    if (changes['nutzerverwaltung'] && changes['nutzerverwaltung'].currentValue !== '') {
       this.nutzerverwaltungLocal= this.nutzerverwaltung;
    }
    // .... and so on for the others
}

}

是否可以在触发事件的外部更改@ Input / @ Output变量的值？

1 个答案: