Хорошо ли использовать вызовы функций внутри {{}} (Curly Brackets)?
Есть какой-либо способ сделать это? в компоненте, например (возможно, используя ngOnChanges
или что-то в этом ngOnChanges
...)
шаблон
<div class="container">
{{ bootstrap() }}
{{ validate() }}
<textarea class="form-control">{{ fullHtml }}</textarea>
<button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
<textarea class="form-control">{{ validator }}</textarea>
<button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>
<button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>
Составная часть
class HomeComponent {
fullHtml = "";
validator = "";
pages = [{
"name": "Page 1"
},{
"name": "Page 2"
}];
inputs = [{
"name": "input_1",
"required": true
},{
"name": "input_2",
"required": false
}];
public bootstrap() {
this.fullHtml = this.pages.map((page, pageNumber) => {
return '<div class="row">' +
page.name +
'</div>'
}).join('')
}
public validate(){
this.validator = this.inputs.map((input, i) => {
return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],\n';
}).join('')
}
public copy(){
alert("under construction");
}
public add(){
this.pages.push({
name: "page 3"
});
this.inputs.push({
"name": "input_3",
"required": true
});
}
}
https://jsfiddle.net/1hk7knwq/10283/
пс. Мне нужно отображать содержимое HTML в текстовом поле, поэтому я делаю html внутри компонента.