Angular2：如何在组件内部显示组件标签的内部 HTML？

Posted 2023-03-05

【中文标题】Angular2：如何在组件内部显示组件标签的内部 HTML？

【英文标题】：Angular2: How to show inner HTML of component-tags inside of component?

【发布时间】：2017-06-05 16:32:41

【问题描述】：

我有一个关于 angular2 的问题。我正在创建一些组件并希望拥有这样的东西：

这是我的 DogComponent 类：

@Component(
    selector: "dog",
    template: "dog.template.html"
)
class DogComponent

    @Input() image: string;

还有dog.template.html中的模板：

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/image" />
    <!-- Content of <bottom> should go here -->
</div>

当我使用 DogComponent 时，它应该使用传递的 src 创建 img-tag，还可以查看图像前后的其他 HTML 部分。

所以最后，如果我写这段代码：

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>

应该渲染成这样：

<dog>
    <div>
        <h1>This is Garry!</h1>
        <img src="dog.png" />
        <span>He is my favorite dog!</span>
    </div>
</dog>

有人回答我的问题吗？

那就太好了！

编辑：

感谢您的建议，所以现在我更新了我的 sn-ps 并添加了 DogListComponent。如果我在应用程序的某处使用标签dog-list，则应查看最后一个 sn-p（浏览器结果）。希望现在更清楚一点。

dog.component.ts

@Component(
    selector: "dog",
    templateUrl: "dog.template.html"
)
class DogComponent

    @Input() image: string;

dog.template.html

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/image" />
    <!-- Content of <bottom> should go here -->
</div>

dog_list.component.ts

@Component(
    selector: "dog-list",
    templateUrl: "dog-list.template.html"
)
class DogListComponent

dog-list.template.html

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>
<dog image="linda.png">
    <top>
        <h1>My little Linda :)</h1>
    </top>
    <bottom>
        <span>She is my cutest dog!</span>
    </bottom>
</dog>
<dog image="rex.png">
    <top>
        <h1>And here is Rex!</h1>
    </top>
    <bottom>
        <span>DANGEROUS!</span>
    </bottom>
</dog>

浏览器结果：

<dog-list>
    <dog image="garry.png">
        <top>
            <h1>This is Garry!</h1>
        </top>
        <bottom>
            <span>He is my favorite dog!</span>
        </bottom>
    </dog>

    <dog image="linda.png">
        <top>
            <h1>My little Linda :)</h1>
        </top>
        <bottom>
            <span>She is my cutest dog!</span>
        </bottom>
    </dog>

    <dog image="rex.png">
        <top>
            <h1>And here is Rex!</h1>
        </top>
        <bottom>
            <span>DANGEROUS!</span>
        </bottom>
    </dog>
<dog-list>

【问题讨论】：

你的意思是它应该在你正在使用的编辑器/IDE中显示它吗？或者通过 DOM - 如果您检查它，它会执行此操作。也是 templateUrl 不是模板

它应该在运行应用程序时显示在编译/渲染的 DOM 中。我试图实现，dog.template.html 中的注释<!-- Content of <top> should go here --> 被dog-list.template.html 中指定的标签<top><h1>This is Garry!</h1></top> 替换。

【参考方案1】：

所以我找到了解决方案！我需要使用<ng-content>。

dog.template.html 看起来像这样：

<div>
    <ng-content select="top"></ng-content>
    <img class="after" src="dogs/image" />
    <ng-content select="bottom"></ng-content>
</div>

然后它会在我的div中插入指定的<top>-tags和<bottom>-tags。

【参考方案2】：

您似乎误解了选择器的角色。选择器<dog></dog> 将被其他组件（例如AppComponent）用来显示你的狗组件HTML。所以，在他自己的组件 HTML 中使用选择器是没有意义的。

另外，如果你想使用外部文件作为模板，语法是templateUrl 而不是template。所以：

@Component(
selector: "dog",
templateUrl: "dog.template.html" // make sure the path to the file is correct

在您的dog.template.html 中，只需输入您的 HTML 代码：

<div>
    <h1>This is Garry!</h1>
    <img src="dogs/image" /> 
    <!-- the component deliver the value image (dog.png) to your template -->
    <span>He is my favorite dog!</span>
</div>

编辑以响应您更新的代码。 如果我理解得很好，您可以从dog_list.component.ts 访问一组狗pictures。 您可以在模板中使用它们，例如 *ngFor="let picture of pictures"。你没有说你的数据是什么样的，但如果你有一个格式像arr = ['topTile':'This is Garry!', 'picture': 'garry.png', 'bottomTitle':'He is my favorite dog!' , , ...]的数组，也许你可以试试这个。

 <!-- Parent component template (dog_list) --> 
   <div *ngFor="let data of arr">
        <top>
            <h1> data.topTitle </h1> <!-- This is Garry!, ... -->
        </top>
        <dog [image]="data.picture"></dog><!-- Bind data to children component dog with value garry.png -->
        <bottom>
            <span> data.bottomTitle </span> <!-- He is my favorite dog!,... -->
        </bottom> 
    </div>

有关更多详细信息，也许角度模板语法文档可以提供帮助： https://angular.io/docs/ts/latest/guide/template-syntax.html

【讨论】：

感谢 templateUrl，这只是一个例子，在实际应用中我做得对；）而且我也理解选择器。就我而言，我尝试将 DogComponent 之外的一些其他标签（在 DogListComponent 的更新问题中）放入 DogComponent。