Angular问题记录

记录Angular第一次在父组件中写子组件的过程中遇到的一些问题

1. 父组件嵌入子组件

父组件 parent 
子组件 child

//命令行在父组件下生成了一个子组件，但是Angular CLI 将不会自动将该组件导入到最近的模块中，而是需要手动将组件添加到某个模块中。
ng g component parent\child --skip-import

//在引入parent组件的module.ts组件中，也对child执行相同引入
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParentComponent } from './parent'; 
import { ChildComponent } from './parent/child'; 

@NgModule({
  declarations: [
    ParentComponent ,
    ChildComponent 
  ], // 在 declarations 数组中添加 IllegalLogComponent 和 AlarmSettingComponent
  imports: [CommonModule],
  exports: []
})
export class XXXModule { }

//所以，接下来我们需要在父组件中注入子组件
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './parent/child'; 

@ViewChild(ChildComponent ) childComponent : ChildComponent ;

//这时候，我们就可以在父组件的html文件中，使用来引入子组件

//如果我们想要在父组件中调用子组件的方法
this.childComponent.XXX方法()

2. 页面有一个ng-template #xxx，ts如何控制它的显示隐藏?

<ng-container *ngIf="isShowXXX">
  <ng-template #XXX>
    
  ng-template>
ng-container>

isShowXXX = false
toggleXXX() {
    this.isShowXXX = !this.isShowXXX;
  }

3. angular中的zorro的使用时，本身的html文件中没有写相应元素，但最后在浏览器中渲染出来了，如何去更改这种类型元素的样式呢?

//考虑使用 /deep/ 或 ::ng-deep 等方式来强制穿透组件封装层级。
/* 使用 /deep/ 方式 */
/deep/ .ant-notification-close-icon {
  color: red;
}

/* 使用 ::ng-deep 伪类方式 */
:host ::ng-deep .ant-notification-close-icon {
  color: red;
}

4. nzModal自定义

<nz-modal
    [(nzVisible)]="isShowAlarmSetting"
    nzTitle="这里是标题"
    (nzOnCancel)="handleCancel()"
    (nzOnOk)="handleOk()"
    [nzContent]="modalContent"
    [nzFooter]="modalFooter"
>
nz-modal>

<ng-template #modalContent>
    ...
ng-template>

<ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消button>
    <button nz-button nzType="primary" (click)="handleOk()">确认button>
ng-template>

import { NzModalService } from 'ng-zorro-antd/modal';

constructor(private router: Router,private modal: NzModalService, private notification: NzNotificationService,private vcRef: ViewContainerRef) {}

show() {
    this.isShowAlarmSetting = true;
}
handleCancel() {
    this.isShowAlarmSetting = false;
}
handleOk() {
    this.isShowAlarmSetting = false;
}

5. 动态提示信息-zorro的notification

<ng-container *ngIf="isshowAlarmInfo" ngTemplateOutlet="alarmInfo, contenxt:failObj">ng-container>
<ng-template #alarmInfo let-notification >
    <div class="ant-notification-notice-content">
        <div>
            <div class="ant-notification-notice-message alarm-info-title">标题div>
            <div class="ant-notification-notice-description alarm-info-content">
                内容
            div>
            
            <span class="ant-notification-notice-btn">
                <button nz-button nzType="primary" nzSize="small" (click)="viewDetails()">
                    <span>关闭span>
                button>
                <button nz-button nzType="default" nzSize="small" (click)="notification.close()">
                    <span>确认span>
                button>    
            span>
        div>
    div>
ng-template>

import { NzNotificationService } from 'ng-zorro-antd/notification';

//注入该template
@ViewChild('alarmInfo')
alarmInfo: TemplateRef<any>

failObj:any = {...}

constructor(private router: Router,private modal: NzModalService, private notification: NzNotificationService,private vcRef: ViewContainerRef) {}

//展示告警信息
 showAlarmInfo() {
     this.isshowAlarmInfo = !this.isshowAlarmInfo
     this.notification.template(this.alarmInfo);
 }
 //查看详情，关闭告警信息并进行页面跳转
 viewDetails(){
     this.notification.remove()//移去提示（关闭）
     this.router.navigate(['xxx'])
 }