[英]Angular attach DOM to Component
因此,在angularjs中,您可以定義指令並將html模板綁定到已經存在的控制器。 原則上,這意味着您可以將控制器重用於多個指令,因此可以用於多個模板。
angular
.module('App')
.component('Name', {
templateUrl: 'some.html',
controller: 'someController'
});
如何在Angular中執行此操作。 據我了解,它在Angular Components中是指令,並且總是直接綁定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(){}
}
到目前為止,我發現的唯一選擇是通過擴展,但是我認為那太過分了。
templateUrl
定義為函數 您可以指定templateUrl
為代表的URL字符串或為這需要兩個參數的函數 tElement
和tAttrs
。
該函數采用以下參數:
tElement
模板元素-聲明了指令的元素。
tAttrs
模板屬性-在此元素上聲明的屬性的規范化列表。
有關更多信息,請參見AngularJS綜合指令API參考-templateURL
經過更多研究,似乎我能想到的最佳解決方案是使用繼承。
https://coryrylan.com/blog/angular-component-inheritance-and-template-swapping
他對此有很好的描述
謝謝所有幫助我的人;)
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,前提是其他后面的代碼保持不變。 根據我的需求,我沒有使用每個變量。 希望這可以幫助。
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 { }
在這種情況下,我計划在多個地方重用加載組件。 我會在注射區域特異性上午該模塊打算使用加載組件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.