Question

我有两个组件，Full-Layout（父组件）和Department（子组件）。

当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

您需要在班级中将@Input()添加到classTitle上

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

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

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

Answer 2

您可以使用其中一种

@Input() title:string = "";

或

ngOnInit() {
        this.title=""

    }

或

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

Answer 3

您好请删除此输入属性并尝试

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

Answer 4

试试这个：[标题]作为app-department attribut应该听取计数：

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

必须在父组件中初始化输入属性，如果您使用的是* 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);
  }
}

Angular2 Input（）变量打印未定义

5 个答案: