Question

所以我有类似下面的内容，在他们自己的文件中定义了父和子组件：

父

/// <reference path="angular2/typings/browser.d.ts" />
/// <reference path="angular2/core.d.ts" />

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

@Component({
    selector: 'parent',
    template:
    '<div>
        <ng-content></ng-content>
    </div>'
})
export class Parent{
    parentDiagnostic(){
        return "this is the parent scope!";
    }
}

bootstrap(Parent);

儿童

/// <reference path="angular2/typings/browser.d.ts" />
/// <reference path="angular2/core.d.ts" />

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

@Component({
    selector: 'child',
    template:
    '<div>
        <h1>{{parentDiagnostic()}}</h1>
        <h1>{{childDiagnostic()}}</h1>
    </div>'
})
export class Child{
    childDiagnostic() {
        return "this is a child!";
    }
}

bootstrap(Child);

我用的是这样的：

<parent>
    <child></child>
</parent>

为什么parentDiagnostic（）在子范围内有效但childDiagnostic（）不是？不应该是相反的吗？父母和孩子不需要沟通，但嵌入了html。你是如何解决这个问题的？

Answer 1

ng-content没有记录，但有很多非常简单的例子很容易引起误解。

ng-content是组件模板中的投影目标，投影内容本身属于声明它的模板，所有模板变量和方法都是如此。

在您的情况下，根模板直接在html页面上声明，因此它的所有者是Parent组件（作为最顶层的组件），因此所有模板变量都是针对Parent组件解析的。

angular2与打字稿和ng-content，我的范围是什么？

1 个答案: