Angular 将 DOM 附加到组件

Question

所以在 angularjs 中你可以定义一个指令并将 html 模板绑定到一个已经存在的控制器。原则上，这意味着您可以将控制器重用于多个指令，因此也可以用于多个模板。

angular
.module('App')
.component('Name', {
    templateUrl: 'some.html',
    controller: 'someController'
});

如何在 Angular 中执行此操作。据我了解，Angular 组件是指令，并且总是直接绑定 html。基本上我想使用另一个视图，它只更改 html 但保持相同的功能。

编辑：

基本上我想要这个：

@Component({
    selector: 'jhi-exercise-list',
    templateUrl: '(MULTIPLE HTML TEMPLATE PATHS HERE)',
    providers: [                      
                ]
})
    export class className{

    //USING THE SAME COMPONENT CODE FOR THE MULTIPLE TEMPLATES

    constructor(){}
}

到目前为止，我发现的唯一选择是通过扩展，但我认为这太过分了。

Answer 1

将templateUrl定义为函数

您可以将 templateUrl 指定为表示 URL 的字符串或作为函数，它接受两个参数 tElement 和 tAttrs。

该函数接受以下参数：

• tElement - 模板元素 - 声明指令的元素。

• tAttrs - 模板属性 - 在此元素上声明的规范化属性列表。

欲了解更多信息，请参阅AngularJS Comprehensive Directive API Reference - templateURL

Answer 2

经过更多研究，似乎我能想出的最佳解决方案仍然是使用继承。

https://coryrylan.com/blog/angular-component-inheritance-and-template-swapping

他有一个相当不错的描述

感谢所有帮助过我的人 ;)

Answer 3

在 angularjs 中必须有一些指令，例如 ng-if 或类似的东西。

在 Angular 4 中，您可以将其作为一种方式进行

<div *ngIf="x === 1"></div>
<div *ngIf="x === 2"></div>

你可以根据需要传递x的值。

添加解决方案

import { Component, Input } from '@angular/core';
import { Blogger } from '../models/blogger';
import { BloggerProfileService } from '../service/blogger-profile.service';
import { SharedService } from '../service/shared.service';
import { AuthService } from '../auth-service.service';
import { Router } from '@angular/router';

@Component({
  selector: 'article-author-panel',
  templateUrl: './article-author-panel.component.html',
  styleUrls: ['./article-author-panel.component.css']
})
export class ArticleAuthorPanelComponent {

  @Input('templateType') templateType;
  author;
  blogger : Blogger;
  articleDt;
  user;

  @Input()
    get articleDate(){
      return this.articleDt;
    }

    set articleDate(date){
      this.articleDt = this.sharedService.getUTCDate(new Date(date));
    }
  @Input()

  set articleAuthor(author) {
    this.author = author;
    this.bloggerProfileService.getBlogger(author)
    .take(1)
    .subscribe((blogger) => {
      this.blogger = blogger;
    })
  }

  get articleAuthor() {
    return this.author;
  }

  constructor(
    private bloggerProfileService: BloggerProfileService,
    private sharedService: SharedService,
    private router : Router,
    private authService: AuthService
  ) {
    authService.user$
    .take(1)
    .subscribe((user) => {
      if(user) this.user = user;
    });
  }

  clickFollow(){
    if(this.user === null || this.user === undefined){
      this.router.navigate(['/']);
    }
  }

}

模板

<ng-container *ngIf="templateType === 1">
    <div class="row no-gutters" style="border-top: 1px solid #a0a0a0; padding-top:5px;">
        <div class="col-2">
            <img src="http://www.publicdomainpictures.net/pictures/170000/velka/spinach-leaves-1461774375kTU.jpg" alt="Person" class="aap-image">
        </div>
        <div class="col-10">
            <div class="row">
                <div class="col-9">
                    <div class="aap-b-detail" *ngIf="blogger">
                        <span class="aap-b-name">{{ blogger.name }}</span>
                        <br />
                        <span class="aap-b-summary">{{ blogger.summary }}</span>
                    </div>
                </div>
                <div class="col-3">
                    <button class="aap-follow" (click)="clickFollow()">Follow</button>
                </div>
            </div>
        </div>
    </div>
</ng-container>
<ng-container *ngIf="templateType === 2">
    <div class="row no-gutters">
        <div class="col-2">
            <img src="http://www.publicdomainpictures.net/pictures/170000/velka/spinach-leaves-1461774375kTU.jpg" alt="Person" class="aap-image">
        </div>
        <div class="col-10">
            <div class="row">
                <div class="col-9">
                    <div class="aap-b-detail aap-b-detail-lh" *ngIf="blogger">
                        <span class="aap-b-name">{{ blogger.name }}</span>
                        <br />
                        <span class="aap-b-summary">{{ blogger.summary }}</span>
                        <br />
                        <span class="aap-b-date">{{ articleDate }}</span>
                    </div>
                </div>
                <div class="col-3">
                    <button class="aap-follow" (click)="clickFollow()">Follow</button>
                </div>
            </div>
        </div>
    </div>
</ng-container>

这是我创建的组件，根据我放置组件的位置，布局会发生变化。如果保持后面的代码相同，您可以将其视为正常连接在一起的两个不同的 html。根据我的要求，我没有使用每个变量。希望这会有所帮助。

Answer 4

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LoadingComponent } from './loading.component'

@NgModule({
imports: [
CommonModule
],
declarations: [LoadingComponent],
exports: [LoadingComponent]
})
export class LoadingModule { }

在这种情况下，我计划在多个地方重用加载组件。我将在打算使用加载组件的特定区域注入此模块