Registro de problemas angulares

Registre algunos problemas encontrados por Angular en el proceso de escribir componentes secundarios en componentes principales por primera vez

1. El componente principal incrusta el componente secundario

父组件 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文件中，使用<app-child></app-child>来引入子组件

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

2. La página tiene una plantilla ng #xxx, ¿cómo controla ts su visualización y ocultación?

<ng-container *ngIf="isShowXXX">
  <ng-template #XXX>
    <!-- 模板内容 -->
  </ng-template>
</ng-container>

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

3. Al usar zorro en angular, el elemento correspondiente no se escribe en el propio archivo html, sino que finalmente se renderiza en el navegador ¿Cómo cambiar el estilo de este tipo de elemento?

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

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

4. nzModalPersonalizado

<!-- 告警设置 -->
<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. Información de solicitud dinámica - notificación de zorro

<!-- 告警信息 -->
<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'])
 }