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

Question

So i have something like the following with a parent and child component defined in their own files:

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: 'parent',
    template:
    '<div>
        <ng-content></ng-content>
    </div>'
})
export class Parent{
    parentDiagnostic(){
        return "this is the parent scope!";
    }
}

bootstrap(Parent);

Child

/// <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);

Which i use like this:

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

Why is parentDiagnostic() valid in child scope but childDiagnostic() is not? shouldn't it be the opposite? the parent and child don't need to communicate, but html is embedded. How do you fix this?

Answer 1

ng-content is not documented, but there are a lot of very simple examples that are quite misleading.

ng-content is projection target within component template, projected content itself belongs to template where it was declared and so are all template variables and methods.

In your case root template is declared directly on html page, so its owner is Parent component (as the top most component), so all template vars are resolved against Parent component.