gpt4 book ai didi

javascript - 数据绑定(bind) ng2 组件的模板只设置 OnInit

转载 作者:搜寻专家 更新时间:2023-10-30 21:20:16 27 4
gpt4 key购买 nike

我有一个 Angular 2 (RC5) 组件,它进行 HTTP 调用并将结果设置为组件的模板。我想在 HTTP 调用返回的 HTML 中注入(inject)一个值。例如,返回的 HTML 中的一行是:

<a class="d2h-file-name" href="{{chapterURL}}">app/views/login/login.xml</a>

但是,它完全按原样呈现,没有注入(inject) chapterURL。据推测,这是因为在初始化过程中未设置模板?如果是这样,我应该如何将这些动态值注入(inject)到模板中?

这是组件。

@Component({
selector: 'codestep',
template: `<div class="codestep" [innerHTML]="content"></div>`
})
export class codeStepComponent {
@Input() step: string;
private content: string = '';
private chapterURL;

constructor(private route: ActivatedRoute, private http: Http) { }

ngOnInit() {
this.chapterURL = './diff/' + this.step + '.html';
this.getChapter()
.subscribe(
chapterContent => this.content = chapterContent,
error => this.errorMessage = <any>error);
}

getChapter(): Observable<any> {
return this.http.get(this.chapterURL)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Res) {
let body = res._body;
return body;
}
//Error handling function here...
}

编辑:

我已将 http 调用返回的源 html 文件更改为:

<a class="d2h-file-name" href={{chapterURL}}>app/views/login/login.xml</a>

然后将组件的模板更改为:

template: `<div class="codestep" [innerHTML]="content|rawHtml"></div>`

其中 rawHtml 是一个通过 DomSanitizationService 上的 bypassSecurityTrustHtml() 函数清理内容的管道,但是,我仍然得到相同的结果,渲染结果为:

<a class="d2h-file-name" href="gitURL">app/views/login/login.xml</a>

如果我对浏览器中选择的组件执行 ng.probe($0),则返回的结果对象具有属性,但列出的唯一属性是 innerHTML,没有别的……

最佳答案

2个方法

方法一——查找替换

如果数据只需要在初始化时更新一次,这很简单。

ngOnInit() {
this.chapterURL = './diff/' + this.step + '.html';
this.getChapter()
.subscribe(
chapterContent:string => {

// Pre-process the content
processedContent = chapterContent.replace('{{chapterURL}}',this.chapterURL);

this.content = processedContent;
},
error => this.errorMessage = <any>error);
}

方法二——动态组件

Angular 2 不支持组件模板运行时更新。

innerHTML 不会满足您的要求,因为 Angular2 不会解析它的内容。因此 innerHTML 中的数据绑定(bind)将不起作用。

为了存档运行时模板更新,或者更准确地说,运行时模板生成使用动态组件。

Radim Köhler 在这里给出了一个带有示例的详细答案: https://stackoverflow.com/a/38888009/1810391

http://plnkr.co/edit/iXckLz?p=preview

下面是我放在一起的一个非常简单的例子:

cf.com.ts

import { Component, ComponentRef, ViewChild, ViewContainerRef } from '@angular/core';

import { RuntimeCompiler } from '@angular/compiler';

import { CfModule } from './cf.module';

@Component({
selector: 'cf-com',
template: `
<h1>{{title}}</h1>
<button (click)="template1()">Template 1</button>
<button (click)="template2()">Template 2</button>
<button (click)="moreChild()">More Child</button>
<template [ngIf]="childRef" #child></template>`
})
export class CfCom {
title = 'Component Factory Test';

// reference for html element with #child tag
@ViewChild('child', { read: ViewContainerRef }) protected childComTarget: ViewContainerRef;
// Child component reference
protected childRef: ComponentRef<any>;

constructor(private compiler: RuntimeCompiler) { }

// Child Input. Use object, not basic type
childInput = { counter: 0 };

// Click to get more children
moreChild() {
this.childInput.counter++;
}

// Click to use template 1
template1() {
let t = 'Child:{{j.counter}}';
this.createChild(t);
}

// Click to use template 1
template2() {
let t = 'Children:{{j.counter}}';
this.createChild(t);
}

createChild(t: string) {
// Destroy child if exist
if (this.childRef) {
this.childRef.destroy();
this.childRef = null;
}

// cf-child class
@Component({
selector: 'cf-child',
template: t // template from parameter t
})
class CfChildCom {
j; // will be bind with parent childInput, see below
}

this.compiler.compileComponentAsync<any>(CfChildCom, CfModule)
.then(factory => {
this.childRef = this.childComTarget.createComponent(factory, 0);

// This is how parent variable bind with child variable
this.childRef.instance.j = this.childInput;
});
}
}

cf.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { COMPILER_PROVIDERS } from '@angular/compiler';

import { CfCom } from './cf.com';

@NgModule({
imports: [BrowserModule],
exports: [CfCom],
providers: [COMPILER_PROVIDERS],
declarations: [CfCom]
})
export class CfModule { }

关于javascript - 数据绑定(bind) ng2 组件的模板只设置 OnInit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38947172/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com