Question

大家好我已经制作了一个有角度的4应用程序，我有我的组件：Contentholder。 Contentholder只是一些HTML＆amp; 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，＆＃34;内容持有者＆＃34;之间的所有内容。括号被遗忘。

我如何使用contentholder组件并从我正在使用的页面中抛出自己的HTML？不仅仅是复制和粘贴。这就是我尝试将内容持有者作为组件的原因。

---------------------- UPDATE --------------------- ---

当我像这样使用它时：

<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>放在将接受已转换内容的组件中。像这样：

内容-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>的更高级用例。

角度4变量模板

2 个答案: