A property is a calling interface that a component exposes to the outside world, and the caller customizes the behavior and appearance of the component by setting different property values:
Adding a property interface to a component in ANGULAR2 is straightforward, just declare the member variable of the component in the Properties property of the Component annotation:
1 // 2@Component ({3 properties:["name", "Country"]4 })The code above exposes the member variables name and country of the component to a property of the same name, which means that in the Ezapp template, you can set the properties of the Ezcard object directly using the bracket syntax:
1 // Ezapp 2 @View ({3 directives: [Ezcard],4 [name]= "Lei Feng "] [ country]= "' China '"></ez-card> "5 }"Reminder : If you want to use a custom directive in a template (the component is an instruction), you must declare it in advance in the Directives property of the view annotation !
Examples are as follows:
1<!doctype html>234<meta charset= "Utf-8" >5<title>Property</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 - //Root component-Ezapp -@Component ({selector: "Ez-app", - properties:["Name", "Country"]}) + @View ({ - Directives:[ezcard], + Template: ' A<div class= "Ez-app" > at<b>{{name}}</b> <b>{{country}}</b> -<ez-card></ez-card> -</div> ' - }) - class ezapp{ - Constructor () { in this.name = "Mike"; - this.country = "Sweden"; to } + } - the //component with attribute interface-Ezcard * @Component ({ $Selector: "Ez-card",Panax Notoginseng properties:["Name", "Country"] - }) the @View ({ +Template: ' <div class= ' Ez-card ' > AMy name is<b>{{name}}</b>, theI am From<b>{{country}}</b>.</div>` + }) - class ezcard{ $ Constructor () { $ This. Name = "Mike"; - This. Country = "Sweden"; - } the } - Wuyi //Rendering Components the Bootstrap (Ezapp); -</script> Wu</body> -The results are as follows:
Angular2 Component Development-Properties and events (i)
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
