angular2-databinding | 易学教程

Angular2 innerHtml binding breaks data binding

阅读更多关于 Angular2 innerHtml binding breaks data binding

问题 I am trying to bind to innerHtml while keeping data binding. This does not work (outputs {{myVar}}). @Component({ selector: "test", template: ` <div [innerHtml]="myHtml"></div> `, }) export class TestComponent{ title = "My Title"; myHtml: SafeHtml; constructor(private sanitizer: DomSanitizer){ this.myHtml = sanitizer.bypassSecurityTrustHtml("<h1>{{title}}</h1>"); } } In my real app, myHtml is the content of an SVG file (which is why I need to bypassSecurityTrustHtml ) and often changes, so

Function is getting called many times by using template interpolation?

阅读更多关于 Function is getting called many times by using template interpolation?

问题 Sorry for basic question, I am trying to understand the angular2 flow using basic example. import { Component } from '@angular/core'; @Component({ selector:'my-app', template:'Test {{ getVal() }}' }) export class AppComponent{ getVal():void{ console.log("demo text") } } After running this example, "demo text" is visible in console 4times, why is it so ? Thanks. 回答1: Binding to functions or methods in the template is discouraged because these functions are called every time change detection is

Angular - Is binding a component method to DOM target property a wrong practice?

阅读更多关于 Angular - Is binding a component method to DOM target property a wrong practice?

问题 Say, I have a component which is used as following: <health-renderer [health]="getHealth()" [label]="label"> <health-renderer> After reading data-binding related parts from https://angular.io/guide/template-syntax, it seem like the way I am setting target component property health is wrong as the template expression used is getHealth() which is a method. And method binding should only be done with events, not properties. In other words, template expression (the thing on right-hand side of = )

Angular - Is binding a component method to DOM target property a wrong practice?

阅读更多关于 Angular - Is binding a component method to DOM target property a wrong practice?

Say, I have a component which is used as following: <health-renderer [health]="getHealth()" [label]="label"> <health-renderer> After reading data-binding related parts from https://angular.io/guide/template-syntax , it seem like the way I am setting target component property health is wrong as the template expression used is getHealth() which is a method. And method binding should only be done with events, not properties. In other words, template expression (the thing on right-hand side of = ) need to be a template variable, template reference variable or a component/directive/element property

Angular2 innerHtml binding breaks data binding

阅读更多关于 Angular2 innerHtml binding breaks data binding

I am trying to bind to innerHtml while keeping data binding. This does not work (outputs {{myVar}}). @Component({ selector: "test", template: ` <div [innerHtml]="myHtml"></div> `, }) export class TestComponent{ title = "My Title"; myHtml: SafeHtml; constructor(private sanitizer: DomSanitizer){ this.myHtml = sanitizer.bypassSecurityTrustHtml("<h1>{{title}}</h1>"); } } In my real app, myHtml is the content of an SVG file (which is why I need to bypassSecurityTrustHtml ) and often changes, so that I cannot put it in my template (it could come from 20 different SVG files). If there was a way to

ExpressionChangedAfterItHasBeenCheckedError Explained

阅读更多关于 ExpressionChangedAfterItHasBeenCheckedError Explained

问题 Please explain to me why I keep getting this error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Obviously, I only get it in dev mode, it doesn\'t happen on my production build, but it\'s very annoying and I simply don\'t understand the benefits of having an error in my dev environment that won\'t show up on prod --probably because of my lack of understanding. Usually, the fix is easy enough, I just wrap the error causing code in a setTimeout like

Angular HTML binding

阅读更多关于 Angular HTML binding

问题 I am writing an Angular application and I have an HTML response I want to display. How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course). I need somehow to bind the innerHTML of a div to the variable value. 回答1: The correct syntax is the following: <div [innerHTML]="theHtmlString"></div> Works on 8.2.13 Documentation Reference 回答2: Angular 2.0.0 and Angular 4.0.0 final For safe content just <div [innerHTML]="myVal"></div> DOMSanitizer

ExpressionChangedAfterItHasBeenCheckedError Explained

阅读更多关于 ExpressionChangedAfterItHasBeenCheckedError Explained

Please explain to me why I keep getting this error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Obviously, I only get it in dev mode, it doesn't happen on my production build, but it's very annoying and I simply don't understand the benefits of having an error in my dev environment that won't show up on prod --probably because of my lack of understanding. Usually, the fix is easy enough, I just wrap the error causing code in a setTimeout like this: setTimeout(()=> { this.isLoading = true; }, 0); Or force detect changes with a constructor like this: