Question

我正在尝试将输入与此处定义的组件绑定：

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>

演示错误：

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

我在这里缺少什么？

由于

Answer 1

您的输入尚未在构造函数中可用。试试这个f.e。

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

_componentName: string

这样您就可以在if

中的set语句中调用方法

Answer 2

你需要失去＆＃39; []＆＃39;如果你的输入是一个字符串。

componentName="componentname"

Angular2：输入绑定

2 个答案: