Sometimes different elements in the template may need to be called each other, and ANGULAR2 provides a simple syntax for mapping elements to local variables: Adding a property that begins with a # or var-, followed by a section representing the variable name, and an instance of the variable corresponding to the element.
In the following code example, we define a local variable v_h1 for the element H1, which points to the DOM object that corresponds to the element, and you can call its methods and properties elsewhere in the template:
1 @View ({2 Template: '3 #v_h1>hello4 (click) = "#v_h1. Textcontent= ' HELLO '">test</button>5 ' 6 })If a local variable is defined on a component element, its corresponding object is an instance of the component:
1 @View ({2 Directives:[ezcalc],3 "<ez-calc #c =" "></ Ez-calc> "4 })In the example above, the local variable C within the template points to an instance of Ezcalc.
For example:
1<!doctype html>234<meta charset= "Utf-8" >5<title>template-localvar</title>6<script type= "Text/javascript" src= "Lib/[email protected]" ></script>7<script type= "Text/javascript" src= "Lib/angular2.dev.js" ></script>8<script type= "Text/javascript" src= "Lib/system.config.js" ></script>9Ten<body> One<ez-app></ez-app> A -<script type= "Module" > -Import {Component,view,bootstrap} from "Angular2/angular2"; the -@Component ({selector: "Ez-app"}) - @View ({ - Template: ' + + I Choose A <b #v_who >WHO?</b> at -<button (click) ="v_who.textcontent = ' Jason '">Jason</button> -<button (click) ="v_who.textcontent = ' Mary '">Mary</button> -<button (click) ="v_who.textcontent = ' Linda '">Linda</button> -<button (click) ="v_who.textcontent = ' Lincoln '">Lincoln</button> -<button (click) ="v_who.textcontent = ' Jimmy '">Jimmy</button> in<button (click) ="v_who.textcontent = ' Albert '">Albert</button> - ` to }) + class ezapp{} - the Bootstrap (Ezapp); * $</script>Panax Notoginseng</body> -ANGULAR2 Component Development-template Syntax (vi)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
