Angular 4 变量模板

Question

大家好，我制作了一个 Angular 4 应用程序，并且我有我的组件：Contentholder。 Contentholder 只是一些 HTML 和 CSS，用于显示我正在使用的内容持有者。

当我使用<content-holder></content-holder> 时，它可以正常工作并向我显示内容持有者。

但是当我这样使用它时：

<content-holder> 
    <div>
        <h2>{{ translationservice.getExpression("Kiosk.Markforgotten_Text") }}</h2>
        <p>{{ translationservice.getExpression("Kiosk.Markforgotten_Subtext") }}</p>
    </div> 
</content-holder>`

它只是向我显示了 Contentholder，“content-holder”括号之间的所有内容都被抛在了后面。

如何使用 contentholder 组件并将我自己的 HTML 从我正在使用的页面中放入其中？不只是复制和粘贴。这就是我尝试将 contentholder 设为组件的原因。

----------更新---------- ---

当我这样使用它时：

<content-holder>
<ng-content>
    <div>
        <h2>{{ translationservice.getExpression("Kiosk.Markforgotten_Text") }}</h2>
        <p>{{ translationservice.getExpression("Kiosk.Markforgotten_Subtext") }}</p>
    </div>
</ng-content>

我得到这个错误：

    Uncaught Error: Template parse errors:
<ng-content> element cannot have content. ("

<content-holder>
    [ERROR ->]<ng-content>
        <div>
            <h2>{{ translationservice.getExpression("Kiosk.Markforgotten"): ng:///AppModuleShared/ForgotMarkComponent.html@3:4
    at syntaxError (compiler.es5.js:1689)
    at TemplateParser.parse (compiler.es5.js:12801)
    at JitCompiler._compileTemplate (compiler.es5.js:26846)
    at compiler.es5.js:26766
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.es5.js:26766)
    at compiler.es5.js:26653
    at Object.then (compiler.es5.js:1679)
    at JitCompiler._compileModuleAndComponents (compiler.es5.js:26652)
    at JitCompiler.compileModuleAsync (compiler.es5.js:26581)

Answer 1

如果我对您的问题的理解正确，听起来您正在尝试不正确地使用 ng-content。

这就是 ng-content 在 Angular 4 中的工作方式：

组件：

@Component({
    selector: 'wrap',
    template: `
        <div class="wrap">
            <ng-content>
        </div>
    `
})
export class WrapComponent {}

用法：

<wrap>
    <h1>Hello world</h1>
<wrap>

结果：

<div class="wrap">
    <h1>Hello world</h1>
</div>

尝试实现该用法，您的问题应该会消失。

---

以下是您的组件的示例：

组件：

@Component({
    selector: 'content-holder',
    template: `
        <div class="content-holder">
            <ng-content>
        </div>
    `
})
export class ContentHolderComponent {}

用法：

<content-holder> 
    <div>
        <h2>{{ translationservice.getExpression("Kiosk.Markforgotten_Text") }}</h2>
        <p>{{ translationservice.getExpression("Kiosk.Markforgotten_Subtext") }}</p>
    </div> 
</content-holder>

结果：

<div class="content-holder"> 
    <div>
        <h2>some value</h2>
        <p>some value</p>
    </div> 
</div>

Answer 2

您将<ng-content> 放入将接受嵌入内容的组件中。像这样：

content-holder.component.ts

@Component({
  selector: 'content-holder',
  template: `<ng-content></ng-content>`,
  styleUrls: ['./content-holder.component.css'],
})
export class ContentHolder {}

app.component.ts

@Component({
  template:`
  <content-holder>
    <div> My content</div>
  </content-holder>
  `,
})
export class AppComponent  {}

还可以查看此answer，了解更多具有多个插槽和现场演示的<ng-content> 高级用例。