Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

<button (click) = "share()"> share </button>

<button (click) = "share()"> share </button>

<p ng-hide="true"> //隐藏<p ng-hide="false">//显示

=============Html============= <div class="set-select">    <label for="rankbutton">选择平台</label>    <select id="rankbutton" [(ngModel)]="platform" (ngModelChange)="set_platform()">    <select id="rankbutton" [(ngModel)]="platform">      <option *ngFor="let item of platforms" [value]='item.key'>{{item.value}}</option>    </select>  </div> ============Ts================platform = 'wx';platforms: any = [    { key: 'wx', value: '微信' },    { key: 'tt', value: '百度' },    { key: 'wb', value: '微博' },    { key: 'bjh', value: '抖音' },    { key: 'zcool', value: '淘宝' },  ];   set_platform() {     this.platform     console.log('this.platform:',this.platform)   }

<input placeholder="input here" (input)="onInput($event)" />

<a [title]="product.name+'描述'">

src/app/app.component.html (NgModel example)content_copy<input [(ngModel)]="currentItem.name" id="example-ngModel" name='currentName'> //注意某些情况下需要加name表示唯一标识，不加的话可能会报错

src/app/app.module.ts (FormsModule import)content_copyimport { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular/* . . . */@NgModule({/* . . . */ imports: [BrowserModule,FormsModule // <--- import into the NgModule],/* . . . */})export class AppModule { }

<p>{{title}}</p><div><img src="{{itemImageUrl}}"></div>

<div class="text" [innerHTML]="richText"></div>

<ul><li *ngFor="let item of datasource; let o=odd,let e=even" [ngClass]="{odd-action: o,even-action: e}"><card-item [item]="item"></card-item></li></ul>

<h1 ng-repeat="x in records">{{x}}</h1> <script>var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {  $scope.records = [    "菜鸟教程1",    "菜鸟教程2",    "菜鸟教程3",    "菜鸟教程4",  ]});</script>

//在angular中没有else只能都通过ng-if来判断<p ng-if="OwnStatus==0">准备中</p><p ng-if="OwnStatus==1">进行中</p><p ng-if="OwnStatus==2">已经完成</p>

<button (click)="Transfer()">页面调转</button> 在typescript中引用Route：import { Router } from '@angular/router'; 在构造函数里注入：constructor(private router: Router) { } 调转事件：Transfer() {    //调转到指定的页面    this.router.navigateByUrl("workspace/ClassInfo");   }

routerLink本身支持两种写法： <a routerLink="UserDetail"></a><a [routerLink]="['UserDetail']"></a>

let someArray = [1, "string", false]; for (let entry of someArray) {console.log(entry); // 1, "string", false}

let someArray = [1, "string", false]; for (var i = 0; i < someArray.length; i ++) {console.log(someArray[i]); // 1, "string", false}

let list = [4, 5, 6]; for (let i in list) {console.log(i); // "0", "1", "2",} for (let i of list) {console.log(i); // "4", "5", "6"}

forEach其实是JavaScript的循环语法，TypeScript作为JavaScript的语法超集，当然默认也是支持的。 let list = [4, 5, 6];list.forEach((val, idx, array) => {// val: 当前值// idx：当前index// array: Array});

let list = [4, 5, 6];list.every((val, idx, array) => {// val: 当前值// idx：当前index// array: Arrayreturn true; // Continues// Return false will quit the iteration});