angular ts部分 *from stackoverflow* 【BrowserModule】【CommonModule】

 1. Angular ngClass and click event for toggling class

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

2. Setting (click) within *ngFor

I am looping through v.social and displaying social.icon, social.name and social.url within each . I would like to add a (click) action that includes the social.url parameter：

<ion-item *ngFor="let social of v.social" (click)="launch(social.url)">
<img src="{{ social.icon }}" item-left class="social-image">
    <p>{{ social.name }}<br>{{ social.url }}</p>        
</ion-item>

3.  一共有8个button，一个button对应一个图片，预期功能：点击button，图片出现。

要求：一个函数实现8个button的点亮事件。

less部分: 默认是opcity:0（对应的class="off"）；点亮是opcity:1（对应的class="on"）。

html部分：

      <div *ngFor="let model of bodyModel">
          <button
            nz-button
            class="pi-button body-button {{ model.id }}"
            [ngClass]=" model.active ? 'on' : 'off'"
            nzType="primary"
            (click)="light(model)"
          >
          </button>
          <img
            class="{{ model.id }}Light light"
            src="{{ model.src }}"
            alt="{{ model.id }}"
          />
        </div>

ts部分：

import {BodyModel} from "model";
bodyModel = BodyModel;

light(model: ModelActivateRecord) {
    this.bodyModel = this.bodyModel.map((r)=>{
      if(r.id === model.id){
       return {...r, active: !r.active};
      }
      else{
        return r;
      }
})

//light()的简略写法如下：

light(model: ModelActivateRecord) {
this.bodyModel = this.bodyModel.map(r =>
      r.id === model.id ? { ...r, active: !r.active } : r
    );
}

//注意，下面这种写法不可以，尽管可以实现功能：model.active = !model.active

model文件的ts部分如下：

export interface ModelActivateRecord {
  id: string;
  text: string;
  src: string;
  active: boolean;
}
export const BodyModel: ModelActivateRecord[] = [
  {
    id: "head",
    text: "Head",
    src: "assets/bodyModel/head.svg",
    active: false
  },
  {
    id: "neck",
    text: "Neck",
    src: "assets/bodyModel/neck.svg",
    active: false
  }
]

4. 错误类型：Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

When custom modules are used (modules other than AppModule) then it is necessary to import the common module in it.

yourmodule.module.ts

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

 

 

5. BrowserModule 和 CommonModule

BrowserModule 导入了 CommonModule，它贡献了很多通用的指令，比如 ngIf 和 ngFor。 另外，BrowserModule 重新导出了 CommonModule，以便它所有的指令在任何导入了 BrowserModule 的模块中都可以使用。

对于运行在浏览器中的应用来说，都必须在根模块中 AppModule 导入 BrowserModule ，因为它提供了启动和运行浏览器应用时某些必须的服务。BrowserModule 的提供商是面向整个应用的，所以它只能在根模块中使用，而不是特性模块。 特性模块只需要 CommonModule 中的常用指令，它们不需要重新安装所有全应用级的服务。

如果你把 BrowserModule 导入了惰性加载的特性模块中，Angular 就会返回一个错误，并告诉你要改用 CommonModule。

//意思是browsemodule是保证应用在浏览器运行所必须的，而commonmodule其实是包含在browsemodule中的，只是也可以值导入commonmodule，它从browsemodule中导出为特定功能的module