zoukankan      html  css  js  c++  java
  • angular4 组件间通信

    父传子用@input

    子传父用@output

    例:子组件

    <p>
        <span *ngFor="let star of stars;let i=index" class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="star" (click)="clickStar(i)"></span>
        <span>{{rating | number:'1.0-2'}}星</span>  //保留两位小数
    </p>
    import { Component, OnInit ,Input ,Output,EventEmitter,OnChanges,SimpleChanges } from '@angular/core';
    
    @Component({
      selector: 'app-stars',
      templateUrl: './stars.component.html',
      styleUrls: ['./stars.component.scss']
    })
    export class StarsComponent implements OnInit, OnChanges {
    
    //发生改变时,初始化星级和输入框内容 ngOnChanges(changes: SimpleChanges):
    void{ this.stars = []; for(let i=1;i<=5;i++){ this.stars.push(i>this.rating) } } //input装饰器,星级评价的组件的rating属性应该由他的父组件传递给它 @Input() private rating:number = 0; @Output() private ratingChange:EventEmitter<number> = new EventEmitter(); //这里的名字一定要用属性名+Change才能在父组件中使用[(rating)]进行双向数据绑定 private stars:boolean[]; @Input() private readonly:boolean = true; constructor() { } ngOnInit() { } clickStar(index:number){ if(!this.readonly){ this.rating = index+1; this.ngOnInit(); this.ratingChange.emit(this.rating); } } }

    父组件调用子组件,进行双向数据绑定

    <app-stars [(rating)]="newRating" [readonly]="false"></app-stars>
  • 相关阅读:
    web攻击
    HTTP与HTTPS
    HTTP确认访问用户身份的认证
    Http协议(三)返回结果的HTTP状态码
    HTTP协议四(http首部)
    HTTP协议(二)报文信息
    HTTP协议(一)
    Windows10 如何设置软件开机自起动和关闭
    获取Chrome版本并下载匹配的chromedriver
    多线程Runnable
  • 原文地址:https://www.cnblogs.com/leiting/p/8652536.html
Copyright © 2011-2022 走看看