- 安装@angular/router和@ng-bootstrap/ng-bootstrap模块。
- 在app.component.ts文件中引入NgbAlert组件,并注入ActivatedRoute服务和NgbService服务。
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgbService } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private route: ActivatedRoute, private ngbService: NgbService) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
if (params['success']) {
this.showSuccessAlert();
}
});
}
showSuccessAlert() {
this.ngbService.open('Success!', { type: 'success' });
}
}
- 在导航时使用queryParams参数传递success参数并设置为true。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
onSubmit() {
this.router.navigate(['/result'], { queryParams: { success: true } });
}
}
- 在result.component.html中显示成功提示框。
Success!