Angular2 Input（）变量打印undefined

我有两个组件，Full-Layout（父组件）和Department（子组件）。Angular2 Input（）变量打印undefined

当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消息，当我在我的子组件打印标题。

任何想法如何解决这个问题？

谢谢香榭丽舍！

来源

2017-02-17 DingDong

尝试摆脱装饰器中的“inputs”属性并调用控制台登录ngOnChanges – chrispy

对不起，我是Angular2的新手，你能否缩写？ @chrispy – DingDong

您需要在您的类中添加@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>

来源

2017-02-17 15:29:40

我试过了，它仍然打印undefined – DingDong

'Input（）'不工作，我加了'@Input（）'并且仍然不能工作 – DingDong

关于这个问题的任何想法？ – DingDong

您可以使用这些

@Input() title:string = "";

或

ngOnInit() { 
     this.title="" 

    }

或

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

来源

2017-02-17 15:33:38 Aravind

无论使用上述任何一种方式，它都不会打印它在母组件中启动的东西 – DingDong

您可以在团队查看器中使用吗？ – Aravind

你好。是的，我可以有你的详细信息 – DingDong

一个嗨，请删除此个输入财产和尝试

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

来源

2017-02-17 15:38:28 NSM

嗨，它没有解决问题 – DingDong

嗨，我的标题是HTML元素的默认属性。所以试着给出不同的名字，然后尝试:-) – NSM

好的，我把它改成了'checking'，它仍然打印出'undefined' – DingDong

试试这个：[标题]为app-部门attribut应该听ngFor数：

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

来源

2018-02-15 13:57:38 Mike

Angular2 Input（）变量打印undefined

回答

相关问题