Question

我正在学习angular2而ang-book2建议将变量传递给子组件我应该：

在父视图中（在parent app.ts中定义的random_number）：

<app-child
 [passedToChild] = "random_number"
></app-child>

在子组件中：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  inputs: ['passedToChild']
})
export class ChildComponent implements OnInit {
  passedToChild :number;

  constructor() { console.log(this.passedToChild)}

  ngOnInit() {
  }

}

这导致控制台中的输出未定义。

另一方面https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child 他们使用@Input将var传递给子元素。

第二个选项似乎对我有用，但我想了解原因。上面的书和上面的页面都没有解释第一种方法导致未定义的差异或原因。

Answer 1

使用inputs配置对象上的@Component()数组应该与将@Input()装饰器添加到属性AFAIK相同，这不是您的代码没有的原因工作

相反，您的问题是您在构造函数中检查属性是否过早设置。

相反，请检查ngOnInit()方法内部，并且应该为您设置属性。

来自the docs：

<强> ngOnInit
  在Angular首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。

在第一次ngOnChanges之后调用一次。

Answer 2

如果要按照所示绑定子属性，则必须使用Uncaught ReferenceError: CKEDITOR is not defined at vendor-bundle.js:36119 (anonymous) @ vendor-bundle.js:36119 vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-templating-binding. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-templating-binding. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-templating-resources. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-templating-resources. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-event-aggregator. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-event-aggregator. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-history-browser. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-history-browser. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-templating-router. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-templating-router. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin resources/index. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin resources/index. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-dialog. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-dialog. vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-testing. vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-testing. vendor-bundle.js:11929 DEBUG [templating] importing resources for aurelia-templating-resources/compose [] vendor-bundle.js:11929 DEBUG [templating] importing resources for aurelia-templating-router/router-view [] vendor-bundle.js:11929 DEBUG [templating] importing resources for resources/elements/label-input.html [] vendor-bundle.js:11929 DEBUG [templating] importing resources for resources/elements/label-select.html [] vendor-bundle.js:11939 INFO [aurelia] Aurelia Started vendor-bundle.js:11929 DEBUG [templating] importing resources for app.html [] vendor-bundle.js:11929 DEBUG [templating] importing resources for resources/dialogs/wysiwyg-editor-dialog.html ["resources/elements/wysiwyg-editor"] vendor-bundle.js:3790 GET http://localhost/viewer_editor/node_modules/ckeditor/ckeditor.js vendor-bundle.js:1399 Unhandled rejection Error: Script error for "ckeditor/ckeditor", needed by: resources/elements/wysiwyg-editor http://requirejs.org/docs/errors.html#scripterror at F (http://localhost/app/263/scripts/vendor-bundle.js:3763:290) at HTMLScriptElement.onScriptError (http://localhost/app/263/scripts/vendor-bundle.js:3786:113) From previous event: at DefaultLoader.loadModule (http://localhost/app/263/scripts/vendor-bundle.js:11807:14) at DefaultLoader.loadAllModules (http://localhost/app/263/scripts/vendor-bundle.js:11754:25) at ViewEngine.importViewResources (http://localhost/app/263/scripts/vendor-bundle.js:19396:26) at ViewEngine.loadTemplateResources (http://localhost/app/263/scripts/vendor-bundle.js:19366:19) at http://localhost/app/263/scripts/vendor-bundle.js:19314:41 From previous event: at ViewEngine.loadViewFactory (http://localhost/app/263/scripts/vendor-bundle.js:19298:67) at ConventionalViewStrategy.loadViewFactory (http://localhost/app/263/scripts/vendor-bundle.js:16718:25) at HtmlBehaviorResource.load (http://localhost/app/263/scripts/vendor-bundle.js:20056:29) at http://localhost/app/263/scripts/vendor-bundle.js:20589:18 From previous event: at CompositionEngine.createController (http://localhost/app/263/scripts/vendor-bundle.js:20577:71) at CompositionEngine._createControllerAndSwap (http://localhost/app/263/scripts/vendor-bundle.js:20556:19) at CompositionEngine.compose (http://localhost/app/263/scripts/vendor-bundle.js:20636:21) at http://localhost/app/scripts/app-bundle.js:4618:44 From previous event: at http://localhost/app/scripts/app-bundle.js:4613:122 From previous event: at _openDialog (http://localhost/app/scripts/app-bundle.js:4609:66) at http://localhost/app/scripts/app-bundle.js:4555:16 From previous event: at DialogService.open (http://localhost/app/scripts/app-bundle.js:4551:21) at CommonDialogs.showWysiwygEditorDialog (http://localhost/app/scripts/app-bundle.js:1375:39) at Scene.openWysiwygEditorDialog (http://localhost/app/scripts/app-bundle.js:3591:32) at CallScope.evaluate (http://localhost/app/263/scripts/vendor-bundle.js:6658:21) at Listener.callSource (http://localhost/app/263/scripts/vendor-bundle.js:10100:42) at http://localhost/app/263/scripts/vendor-bundle.js:10124:24 at HTMLDocument.handleDelegatedEvent (http://localhost/app/263/scripts/vendor-bundle.js:8303:11) printWarning @ vendor-bundle.js:1399 formatAndLogError @ vendor-bundle.js:1115 fireRejectionEvent @ vendor-bundle.js:1140 Promise._notifyUnhandledRejection @ vendor-bundle.js:587 (anonymous) @ vendor-bundle.js:132装饰器注释子属性。如果子属性没有用@Input()装饰器修饰，那么它必须是书中的错误。

如何将变量传递给子组件？

2 个答案: