Question

我正在开发一个基于Gentallela Alela! html模板构建的Angular 2项目。我的大多数视图都有一些组件，它们的模板文件中都有以下标记：

<div class="col-md-12 col-sm-12 col-xs-12">
  <div class="x_panel">
    <div class="x_title">

      <h2> **Name of component** </h2>

      <ul class="nav navbar-right panel_toolbox">
        <li myToggleContentPanel><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
        </li>
        <li myCloseContentPanel><a class="close-link"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="x_content">


    **Actual content of my component**


    </div>
  </div>
</div>

这显然导致了相当多的重复代码。这是不可取的。我想知道什么是解决这个问题的好方法。在使用python框架Django的项目中，我能够在模板文件中导入模板片段，如下所示：

<div class="basic">
{% include "main/includes/subtemplate.html" %}    
</div>

在Angular 2中是否也可以这样？或者你推荐另一种方法吗？

我制作了一张图片来澄清一点：

主要问题是我没有预先定义的组件数量，所以据我所知这不能用于辅助路由器吗？

Answer 1

我认为你需要阅读Angular 2+文档，因为这正是Angular擅长的。

您的组件（您说其中没有固定号码）实际上只是具有不同输入值的可重用组件。

我建议您在其模板中定义一个可重用的组件，其中包含所有可重复使用的标记。像..

import { Component, Input, OnInit } from '@angular/core';
import { StuffService } from './stuff.service';
import { Stuff } from './stuff.model';

// This is your reusable component (a dumb component). 
// This can be used wherever you like in your app.

@Component({
    selector: 'app-reusable',
    template: `
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">

                    <h2> {{name}} </h2>

                    <ul class="nav navbar-right panel_toolbox">
                        <li myToggleContentPanel><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                        <li myCloseContentPanel><a class="close-link"><i class="fa fa-close"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                            <ng-content></ng-content>
                    </div>
                </div>
            </div>
    `})
export class ReusableComponent {
    @Input() public name: string;
}

// -----------------------------------------------------------------------


// Below is your main component. ( A smart component - uses services to get data) 
// This is what your router hooks up to.

@Component({
    template: `
            <h2>
                Below are all my components!
            </h2>
            <p> There is one for each item in the arrayOfStuff! (using the *ngFor directive </p>
            <p> The input variables can be passed in using the [varible]="whateverYouArePassingIn" syntax like the stuff.name is passed in</p>
            <p> The stuff you put in between your reusable componet tags replaces the ng-content tags. 
                This is usefull if you want to put specific markup in a specific instance of a reusable component. 
                (This was called transclusion in Angular 1.)
            </p>

            <app-reusable *ngFor="let stuff of arrayOfStuff" [name]="stuff.name">
                **All of this stuff replaces the ng-content tags in the Reusable Component**
            </app-reusable>
     `
})
export class MainComponent implements OnInit {
    public arrayOfStuff: Stuff[];

    public constructor(private stuffService: StuffService) { }

    public ngOnInit() {
        this.arrayOfStuff = this.stuffService.getStuff;
    }

}

这只是使用框架的基本原则。所以我强烈建议你仔细阅读Angular intro docs。

删除Angular 2组件的重复模板标记

1 个答案: