角度の問題のログ記録

親コンポーネント内に子コンポーネントを初めて記述するプロセスで Angular が遭遇したいくつかの問題を記録します。

親コンポーネントが子コンポーネントを埋め込む

父组件 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方法()

ページには ng-template #xxx がありますが、ts はその表示と非表示をどのように制御しますか?

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

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

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;
}

nzモーダルカスタム

<!-- 告警设置 -->
<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;
}

動的なプロンプト情報 - ゾロの通知


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

おすすめ