Question

编辑：根据要求，我做了一个plunkr

https://plnkr.co/edit/6rUQdBFFSqNMTojARFXZ

我试图让@Input装饰器使用两个简单的组件。父组件是这一个：

import { Component } from '@angular/core';
import { SidebarComponent } from './components/sidebar.component'

@Component({
  selector: 'my-app',
  template: '<sidebar [sidebarSize]="menu_size"></sidebar>'
})

export class AppComponent {
  menu_size: string = '40';
}

它应该包含完整视图，我们可以在其中找到以下子组件：

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

@Component({
  selector: 'sidebar',
  templateUrl: '<p>This is a sidebar {{sidebarSize}}</p>'
})

export class SidebarComponent {
  @Input('sidebarSize') sidebarSize:string;
}

当我尝试执行此操作时，我收到了错误消息：

EXCEPTION: Template parse errors:
Can't bind to 'sidebarSize' since it isn't a known native property ("<sidebar [ERROR ->][sidebarSize]="menu_size"></sidebar>")

Answer 1

你的插件缺少一堆，但这里有一个包含你的代码的插件。

https://plnkr.co/edit/h2yDyjYe6kbUt0t5queO?p=preview

主要内容是

（缺失）您需要定义一个模块，其中包含您要在模块中使用的组件和服务
templateUrl应该是template

<强> app.module.ts

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, SidebarComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

@Input无法处理Angular

1 个答案: