2016-11-09 6 views
0

Я пытаюсь связать вход с компонентом, как определено здесь:Angular2: Ввод привязки

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child но имя компонента никогда не показывается

Я даже пытался сделать console.log но он показывает:

ComponentName isundefined

<div ng-switch="accessLevel"> 
<div class="customer" ng-switch-when="ENABLED">This is customer data</div> 
<div class="customer-blurr" ng-switch-when="DISABLED"> This is disabled Customer Data</div> 
<div class="customer-blurr" ng-switch-default> <demo-error [componentName]="componentname"></demo-error></div> 
</div> 

и error.html

<div> you are not allowed to access {{component}} </div> 

Demo Ошибка:

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

@Component({ 
    selector: 'demo-error', 
    templateUrl: './error.component.html', 
    styleUrls: ['./error.component.css'] 
}) 
export class ErrorComponentDemo implements OnInit { 
@Input() public componentName:string; 
    constructor() { 
    console.log("componentName is" +this.componentName) 
    } 

    ngOnInit() { 
    } 

}

And in **CustomerComponent:** 

@Component({ 
    selector: 'customer', 
    templateUrl: './customer.component.html', 
    styleUrls: ['./customer.component.css'] 
}) 
export class CustomerComponent extends SuperChildComponent{ 
    public allowed: boolean = false; 
    public accessLevel:AccessLevel =null; 
    public componentname:string; 

    constructor(private authenticationService : AuthorizationService) { 
    super(); 
    this.componentname=this.constructor.name; 
    this.accessLevel=this.authenticationService.isUserLoggedIn()?this.authenticationService.componentAccessLevel(this.constructor.name):null; 
    } 

что я здесь отсутствует?

Благодаря

ответ

2

Ваш вход не будет доступен в конструкторе еще. Попробуйте это f.e.

@Input set componentName(value: string) { 
    if(value != null && value != undefined) { 
    this._componentName = value; console.log(this._componentName); 
    } 
} 

_componentName: string 

Таким образом, вы можете сделать ваши вызовы методов в if заявлении в рамках set

2

Вы должны потерять «[]», если ваш входной строкой.

componentName="componentname"