第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 Angular 7 中,當(dāng)將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件時(shí),我是否使用服務(wù)并在接收組件中

在 Angular 7 中,當(dāng)將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件時(shí),我是否使用服務(wù)并在接收組件中

森林海 2021-11-04 16:15:15
我是 Angular 7 的新手,我想知道我是否走在正確的道路上。我有一個(gè)“警報(bào)”組件,它只在頂部的頁(yè)面上顯示一個(gè) boostrap 警報(bào)框。我希望能夠調(diào)用此警報(bào)并從任何組件顯示它。我很確定我需要一個(gè)服務(wù),我可以調(diào)用它來傳遞消息,然后讓警報(bào)組件訂閱該服務(wù)以偵聽傳入的消息?到目前為止,我可以調(diào)用該服務(wù)并向其傳遞一條“消息”,我只是不知道如何在警報(bào)組件中訂閱/收聽(我認(rèn)為這是正確的術(shù)語(yǔ))以偵聽要顯示的傳入消息。前任。登錄組件constructor(public authService: AuthService, private router: Router, private alert: AlertService) {}login() {  this.authService.login(this.model).subscribe(next => {    this.alert.success('Logged in successfully');  }, error => {    this.alert.failure('Log in failed');  }, () => {    // do something else  });}然后這是我的服務(wù)前任。警報(bào)服務(wù)import {  Injectable} from '@angular/core';@Injectable({  providedIn: 'root'})export class AlertService {  constructor() {}  success(message: string) {  // do something here?  }  error(message: string) {  // do something here?  }}然后我有我的 AlertComponent,但不確定我將如何訂閱/監(jiān)聽從 AlertService 顯示的傳入消息。前任。警報(bào)組件.tsexport class AlertComponent implements OnInit {  dismissible = true;  alerts: any[];  constructor() { }  ngOnInit() {    this.add();  }  // do something here to subscribe/listen to incoming messages from the service??  add(): void {    this.alerts.push({      type: 'info',      msg: `This alert will be closed in 5 seconds (added: ${new Date().toLocaleTimeString()})`,      timeout: 5000    });  } }和 html<div *ngFor="let alert of alerts">  <alert [type]="alert.type" [dismissible]="dismissible" [dismissOnTimeout]="alert.timeout">{{ alert.msg }}</alert></div>
查看完整描述

2 回答

?
瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊

您還可以閱讀Angular Dependency Injection。要在某些組件中使用可注入服務(wù),您必須將其放入構(gòu)造函數(shù)并讓 Angular DI 提供它:AlertComponent 的 Costructor 應(yīng)該具有:


constructor ( private/proteced alertService:AlertService) { 

   alertService.subsribe ((par)=> {

   this.add(par); 

   ...})

}


查看完整回答
反對(duì) 回復(fù) 2021-11-04
?
UYOU

TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊

你有很多東西要學(xué)。這只是懶惰的例子,因?yàn)槊看味几采w可觀察的。這不是一個(gè)完美的代碼,但顯示了一點(diǎn)點(diǎn) Observables 是如何工作的。


警報(bào)服務(wù):


    import {

    Injectable

} from '@angular/core';

import { Observable, of } from 'rxjs';


@Injectable({

    providedIn: 'root'

})

export class AlertService {


    alerts: Observable<any>


    constructor() { }


    success(message: any) {

        this.alerts = of(message)

    }


    error(message: string) {

        this.alerts = of(message)

    }

}

警報(bào)顯示的警報(bào)組件:


export class AlertComponent implements OnInit {

    dismissible = true;


    // just inject service

    constructor(public alerts$: AlertService) { }


    ngOnInit() {

    }


}

模板:


<div *ngIf="alerts$ | async as alerts"> <!-- | async is an pipe it will subscribe for you. importat for observables to first be in *ngIf then in *ngFor loops-->

    <ng-container *ngFor="let item of alerts">

        <alert[type]="alert.type"[dismissible]="dismissible" [dismissOnTimeout]="alert.timeout"> {{ item }}</alert>

    </ng-container>

</div>

在您想要的任何組件中觸發(fā)警報(bào)的命令:


login() {

    this.authService.login(this.model).subscribe(next => {

      this.alert.success({ type: 'info', timeout: '5000', msg: "Success!"});

    }, error => {

        this.alert.failure({ type: 'info', timeout: '5000', msg: "Success!"}); // `this function u can delete meend failure just succes refactor to 'open'`

    }, () => {

      // do something else

    });

  }

關(guān)于服務(wù)您需要記住在app.module.ts或任何其他模塊中提供它們,providers: [AlertService]因此應(yīng)用程序?qū)⒅肋@是一項(xiàng)服務(wù)。然后你在你按班級(jí)的地方注射它們constructor()。注入時(shí),您需要始終為它們?cè)O(shè)置一個(gè)范圍,例如“私有公共或受保護(hù)”,否則您最終會(huì)在類型或服務(wù)類中使用常規(guī)變量。


關(guān)于 Observable:


有無窮無盡的 Observables,當(dāng)你訂閱它們時(shí),你需要在互聯(lián)網(wǎng)上的某個(gè)地方取消訂閱。| async如果變量是一個(gè)無限循環(huán),Pipe 會(huì)為你做這件事。


查看完整回答
反對(duì) 回復(fù) 2021-11-04
  • 2 回答
  • 0 關(guān)注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)