angular - 引导面板不采用 ng-content

Question

我是 Angular 的新手，并试图在打字稿页面中列出引导面板。

所以我试图这样做

bootstrap.panel.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'bs-panel',
    template: `
    <div class="panel panel-default"> 
        <div class="panel-heading">
            <ng-content select=".heading"></ng-content>
        </div>
        <div class="panel-body">
            <ng-content select=".body"></ng-content>
        </div>
    </div>
    `
})

export class BootstrapPanel{

}

然后在主应用程序组件文件中，我像这样引用并使用它

app.component.ts

import {Component} from 'angular2/core';

// bootstrap panel
import {BootstrapPanel} from './bootstrap.panel.component';

@Component({
    selector: 'my-app',
    directives: [BootstrapPanel],
    template: `

    <!-- ngContent sample -->
    <br/>  <br/>  <br/>
    <bs-panel>
       <div class="heading"> This is heading </div>
       <div class="body"> This is the body! </div>
    </bs-panel>

     `
})
export class AppComponent { 

}

但这没有在内容中显示文本

这是它的输出

一旦我按下F12，在控制台部分我可以看到这样

上面的错误是

未捕获的类型错误：无法读取 null 的属性“getSelection”

然后我找到了以下解决方案，它禁用了 Google Chrome 中的所有扩展，然后上面的控制台错误消失了，但内容中仍然没有出现。

我该如何纠正这个