angular - Angular2 Input() 变量打印未定义

Question

我有两个组件，完整布局（父组件）和部门（子组件）。

当 Full-Layout 中的变量被绑定并传递给子组件时，它总是声称它是未定义的。我不确定为什么。

full-layout.component.html

<ul class="nav-dropdown-items">
    <li class="nav-item" *ngFor="let item of dropDownItems">
        <a #clicked class="nav-link" routerLinkActive="active" [routerLink]="[item.routerLink]">
           <i class="icon-puzzle"></i>{{item.name}}
           <app-departments [title]="childTitle"></app-departments>
        </a>
    </li>
</ul>

full-layout.component.ts

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './full-layout.component.html',
})
export class FullLayoutComponent implements OnInit {
  public childTitle: string = 'This text is passed to child';
  constructor() {}
  ngOnInit(): void {}
  
  dropDownItems = [{
      routerLink: '/departments',
      name: 'Artshums'
    },
    {
      routerLink: '/components/social-buttons',
      name: 'Dentistry'
    },
    {
      routerLink: '/components/cards',
      name: 'Law'
    },
    {
      routerLink: '/components/forms',
      name: 'IOPPN'
    },
    {
      routerLink: '/components/modals',
      name: 'LSM'
    },
    {
      routerLink: '/departments',
      name: 'NMS'
    },
    {
      routerLink: '/components/tables',
      name: 'Nursing'
    },
    {
      routerLink: '/components/tabs',
      name: 'SSPP'
    },
    {
      routerLink: '/components/tabs',
      name: 'Health'
    }
  ];
}

departments.component.ts

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  inputs: ['title']
})
export class DepartmentsComponent implements OnInit {
  @Input()
  title:string;

  constructor () {}
  ngOnInit() {
    console.log(this.title);
  }
}

departments.module.ts

@NgModule({
  imports: [
    DepartmentsRoutingModule,
    CommonModule,
    MaterialModule.forRoot()
  ],
  declarations: [ DepartmentsComponent ]
})
export class DepartmentsModule {}

app.module.ts

// imports {...}...
// assume necessary imports above

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    DepartmentsModule,
  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  bootstrap: [ AppComponent ]
})
export class AppModule { }

undefined当我在我的子组件中打印标题时收到消息。

知道如何解决这个问题吗？

谢谢冠军！

Answer 1

您必须在父组件中初始化输入属性，在您使用 *ngFor 和DepartmentsComponent的情况下，您需要输入属性的一些初始值，您可以像下面这样在DepartmentsComponent 模板中处理 @Input 属性值，并且ng-container不会引入任何额外的元素在dom。

<ng-container *ngIf="title">
      <!-- paste  departments.component.html code here -->
</ng-container>

另一种方法是您可以使用ChangeDetectionStrategy OnPush ChangeDetectionStrategy

import {Component, OnInit, Input, ChangeDetectionStrategy} from '@angular/core';

@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DepartmentsComponent implements OnInit {
  @Input()
  title:string;

  constructor () {}
  ngOnInit() {
    console.log(this.title);
  }
}

Answer 2

嗨，请删除此输入属性并尝试

@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  **inputs: ['title']** 
})

Answer 3

试试这个： [title] 作为 app-department 属性应该听 ngFor count ：

<ul class="nav-dropdown-items">
<li class="nav-item" *ngFor="let item of dropDownItems">
    <a class="nav-link" routerLinkActive="active" [routerLink]="item.routerLink">
        <i class="icon-puzzle"></i>{{item.name}}
        <app-departments [title]="item"></app-departments>
    </a>
</li>

并添加到您的子组件：

<p>
  {{title.name}}
</p>

Answer 4

您需要@Input()在您的班级中添加上面的 childTitle 作为

export class FullLayoutComponent implements OnInit {
    @Input()
    public childTitle: string = 'This text is passed to child';

您的 html 中的名称需要与子组件属性相同，并且 html 中的属性必须与父组件属性相同。尝试这个：

<app-departments [childTitle]="title"></app-departments>

Answer 5

您可以使用其中之一

@Input() title:string = "";

或者

ngOnInit() {
        this.title=""

    }

或者

constructor(){
  this.title="";
}