Angular 从注入的组件关闭动态模式窗口_Angular

Angular 从注入的组件关闭动态模式窗口

angular

Angular 从注入的组件关闭动态模式窗口,angular,Angular,我将组件动态加载到模态组件中。模态组件具有关闭对话框的closeModal。我需要从协议组件的remindMeLater方法触发它。该组件被注入到模态组件中。我该怎么做对话框模块 @NgModule({ imports: [CommonModule, FontAwesomeModule], declarations: [DialogComponent, InsertionDirective , AgreementComponent, CustomScrollDirective],

我将组件动态加载到模态组件中。模态组件具有关闭对话框的closeModal。我需要从协议组件的remindMeLater方法触发它。该组件被注入到模态组件中。我该怎么做

对话框模块

@NgModule({
  imports: [CommonModule, FontAwesomeModule],
  declarations: [DialogComponent,  InsertionDirective , AgreementComponent, CustomScrollDirective],
  entryComponents: [DialogComponent, AgreementComponent ] 
})

export class DialogModule {}

对话框组件

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})

export class DialogComponent implements AfterViewInit, OnDestroy {
  private readonly _onClose = new Subject<any>();

  public componentRef: ComponentRef<any>;
  public childComponentType: Type<any>;
  public onClose = this._onClose.asObservable();

  // add this:
  @ViewChild(InsertionDirective, { static: false })
  insertionPoint: InsertionDirective;

  constructor(public componentFactoryResolver: ComponentFactoryResolver,
              public cd: ChangeDetectorRef,
              public dialog: DialogRef) {
  }

  ngAfterViewInit() {
    this.loadChildComponent(this.childComponentType);
    this.cd.detectChanges();
  }

  ngOnDestroy() {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }

  onOverlayClicked(evt: MouseEvent) {
    // close the dialog
  }

  onDialogClicked(evt: MouseEvent) {
    evt.stopPropagation();
  }

  loadChildComponent(componentType: Type<any>) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
    const viewContainerRef = this.insertionPoint.viewContainerRef;
    viewContainerRef.clear();
    this.componentRef = viewContainerRef.createComponent(componentFactory);
  }

  closeModal() {
    this.dialog.close();
  }
}

Component({
  selector: 'agreement-component',
  templateUrl: './agreement.component.html'
})

export class AgreementComponent implements OnInit {
  @ViewChild('scroll', { read: ElementRef, static: false }) public scroll: ElementRef<any>;

  myData: any;
  agreementData: any;
  agreementId: number;
  previousSection: number;
  activeBtn: number;
  currentIndex: number;
  hideEverything = false;
  endOfAgreements = false;
  agreementScrollHeight: number;
  agreementAgreed: boolean;
  todaysDate: Date;
  daysUntil: number;
  hoursUntil: number;
  agreementLength: number;
  lastAgreement: boolean;
  currentUser: any;
  dataLength: number;

  constructor(private userService: UserService, public agreementsService: AgreementsService, private msalService: MsalService) {
    this.activeBtn = 0;
    this.previousSection = -1;
    this.hoursUntil = null;
    this.todaysDate = new Date();
    // Load 1st index content in on page load:

    this.currentUser = this.userService.getCurrentUser().id;
  }

  ngOnInit() {
    this.getOutstandingAgreements(this.currentUser);
  }

  checkIfLastAgreement(justUpdated: number) {
    this.agreementLength === justUpdated + 1 ? this.lastAgreement = true : this.lastAgreement = false;
  }

  acceptSection() {

    if (this.lastAgreement) { this.endOfAgreements = true; }

    this.currentIndex = this.activeBtn;
    this.checkIfLastAgreement(this.activeBtn + 1);
    this.activeBtn = this.activeBtn + 1;

    // if (agreementChoice === true) {

    this.update(Accepted);
    // User selected agree so they can view the next agreement
    this.agreementAgreed = true;
    // Set previous section so add agreed indicator
    this.previousSection = this.activeBtn - 1;

    // ONLY call next section if user isn't on the last viewable agreement!
    // tslint:disable-next-line:no-unused-expression
    if (this.activeBtn !== this.agreementLength) {
      this.getNextSectionContent(this.activeBtn);
    }

  }

  declineSection() {
    this.currentIndex = this.activeBtn;
    this.hideEverything = true;
  }

  remindMeLater() {
    this.currentIndex = this.activeBtn;
    this.update(Deferred);
  }

  getNextSectionContent(contentIndex: number) {
    // Get scroll height of agreement
    this.agreementScrollHeight = this.scroll.nativeElement.scrollHeight;

    // Calculate remaining days left on next agreement
    this.calculateRemainingDaysLeft(contentIndex);

    this.agreementData = this.myData[contentIndex].data;
    this.scroll.nativeElement.scrollTop -= this.agreementScrollHeight;
  }

  public getOutstandingAgreements(Id: number) {
    this.agreementsService.getOutstandingAgreements(Id).subscribe((data: AgreementsModel[]) => {
      if (data.length > 0) {
        this.myData = data;
        this.agreementData = this.myData[0].data;
        this.agreementLength = this.myData.length;
        this.calculateRemainingDaysLeft(0);
      }
    });
  }

  calculateRemainingDaysLeft(contentIndex: number) {
    this.hoursUntil = null; // reset this value
    this.daysUntil = differenceInDays(this.myData[contentIndex].reviewWindowExpiry, this.todaysDate);

    if (this.daysUntil < 1) {
      this.hoursUntil = differenceInHours(this.myData[contentIndex].reviewWindowExpiry, this.todaysDate);
      this.daysUntil = null;
    }
  }

  update = (userAgreementStateId: number) => {
    this.agreementsService.updateAgreement(this.myData[this.currentIndex].userAgreementId,
      userAgreementStateId,
      this.currentUser).then(() => {
      });
    return false;
  }

  backToAgreement() {
    this.hideEverything = false;
  }
  confirmDecline() {
    this.update(Declined);
    this.msalService.logout();
  }
}

@组件({
选择器：“应用程序对话框”，
templateUrl:“./dialog.component.html”
})
导出类DialogComponent实现AfterViewInit、OnDestroy{
private readonly_onClose=新主题（）；
公共componentRef:componentRef；
公共子组件类型：类型；
public onClose=this.\u onClose.asObservable（）；
//添加以下内容：
@ViewChild（InsertionDirective，{static:false}）
插入点：InsertionDirective；
构造函数（公共componentFactoryResolver:componentFactoryResolver，
公共cd:ChangeDetectorRef，
公共对话框：DialogRef）{
}
ngAfterViewInit（）{
this.loadChildComponent（this.childComponentType）；
this.cd.detectChanges（）；
}
恩贡德斯特罗（）{
if（this.componentRef）{
this.componentRef.destroy（）；
}
}
onOverlayClicked（evt:MouseeEvent）{
//关闭对话框
}
onDialogClicked（evt:MouseeEvent）{
evt.stopPropagation（）；
}
loadChildComponent（componentType:Type）{
const componentFactory=this.componentFactoryResolver.resolveComponentFactory（componentType）；
const viewContainerRef=this.insertionPoint.viewContainerRef；
viewContainerRef.clear（）；
this.componentRef=viewContainerRef.createComponent（componentFactory）；
}
closeModal（）{
this.dialog.close（）；
}
}

协议组件

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})

export class DialogComponent implements AfterViewInit, OnDestroy {
  private readonly _onClose = new Subject<any>();

  public componentRef: ComponentRef<any>;
  public childComponentType: Type<any>;
  public onClose = this._onClose.asObservable();

  // add this:
  @ViewChild(InsertionDirective, { static: false })
  insertionPoint: InsertionDirective;

  constructor(public componentFactoryResolver: ComponentFactoryResolver,
              public cd: ChangeDetectorRef,
              public dialog: DialogRef) {
  }

  ngAfterViewInit() {
    this.loadChildComponent(this.childComponentType);
    this.cd.detectChanges();
  }

  ngOnDestroy() {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }

  onOverlayClicked(evt: MouseEvent) {
    // close the dialog
  }

  onDialogClicked(evt: MouseEvent) {
    evt.stopPropagation();
  }

  loadChildComponent(componentType: Type<any>) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
    const viewContainerRef = this.insertionPoint.viewContainerRef;
    viewContainerRef.clear();
    this.componentRef = viewContainerRef.createComponent(componentFactory);
  }

  closeModal() {
    this.dialog.close();
  }
}

Component({
  selector: 'agreement-component',
  templateUrl: './agreement.component.html'
})

export class AgreementComponent implements OnInit {
  @ViewChild('scroll', { read: ElementRef, static: false }) public scroll: ElementRef<any>;

  myData: any;
  agreementData: any;
  agreementId: number;
  previousSection: number;
  activeBtn: number;
  currentIndex: number;
  hideEverything = false;
  endOfAgreements = false;
  agreementScrollHeight: number;
  agreementAgreed: boolean;
  todaysDate: Date;
  daysUntil: number;
  hoursUntil: number;
  agreementLength: number;
  lastAgreement: boolean;
  currentUser: any;
  dataLength: number;

  constructor(private userService: UserService, public agreementsService: AgreementsService, private msalService: MsalService) {
    this.activeBtn = 0;
    this.previousSection = -1;
    this.hoursUntil = null;
    this.todaysDate = new Date();
    // Load 1st index content in on page load:

    this.currentUser = this.userService.getCurrentUser().id;
  }

  ngOnInit() {
    this.getOutstandingAgreements(this.currentUser);
  }

  checkIfLastAgreement(justUpdated: number) {
    this.agreementLength === justUpdated + 1 ? this.lastAgreement = true : this.lastAgreement = false;
  }

  acceptSection() {

    if (this.lastAgreement) { this.endOfAgreements = true; }

    this.currentIndex = this.activeBtn;
    this.checkIfLastAgreement(this.activeBtn + 1);
    this.activeBtn = this.activeBtn + 1;

    // if (agreementChoice === true) {

    this.update(Accepted);
    // User selected agree so they can view the next agreement
    this.agreementAgreed = true;
    // Set previous section so add agreed indicator
    this.previousSection = this.activeBtn - 1;

    // ONLY call next section if user isn't on the last viewable agreement!
    // tslint:disable-next-line:no-unused-expression
    if (this.activeBtn !== this.agreementLength) {
      this.getNextSectionContent(this.activeBtn);
    }

  }

  declineSection() {
    this.currentIndex = this.activeBtn;
    this.hideEverything = true;
  }

  remindMeLater() {
    this.currentIndex = this.activeBtn;
    this.update(Deferred);
  }

  getNextSectionContent(contentIndex: number) {
    // Get scroll height of agreement
    this.agreementScrollHeight = this.scroll.nativeElement.scrollHeight;

    // Calculate remaining days left on next agreement
    this.calculateRemainingDaysLeft(contentIndex);

    this.agreementData = this.myData[contentIndex].data;
    this.scroll.nativeElement.scrollTop -= this.agreementScrollHeight;
  }

  public getOutstandingAgreements(Id: number) {
    this.agreementsService.getOutstandingAgreements(Id).subscribe((data: AgreementsModel[]) => {
      if (data.length > 0) {
        this.myData = data;
        this.agreementData = this.myData[0].data;
        this.agreementLength = this.myData.length;
        this.calculateRemainingDaysLeft(0);
      }
    });
  }

  calculateRemainingDaysLeft(contentIndex: number) {
    this.hoursUntil = null; // reset this value
    this.daysUntil = differenceInDays(this.myData[contentIndex].reviewWindowExpiry, this.todaysDate);

    if (this.daysUntil < 1) {
      this.hoursUntil = differenceInHours(this.myData[contentIndex].reviewWindowExpiry, this.todaysDate);
      this.daysUntil = null;
    }
  }

  update = (userAgreementStateId: number) => {
    this.agreementsService.updateAgreement(this.myData[this.currentIndex].userAgreementId,
      userAgreementStateId,
      this.currentUser).then(() => {
      });
    return false;
  }

  backToAgreement() {
    this.hideEverything = false;
  }
  confirmDecline() {
    this.update(Declined);
    this.msalService.logout();
  }
}

组件({
选择器：'协议组件'，
templateUrl:“./agreement.component.html”
})
导出类AgreementComponent实现OnInit{
@ViewChild（'scroll'，{read:ElementRef，static:false}）公共滚动：ElementRef；
我的数据：任何；
协议数据：任何；
agreementId：编号；
上一节：编号；
activeBtn：数字；
当前索引：编号；
隐藏一切=错误；
内部协议=错误；
协议滚动高度：数字；
agreementAgreed：布尔值；
今日：日期；
daysUntil：数字；
小时数：；
协议长度：数字；
lastAgreement：布尔值；
当前用户：任何；
数据长度：数字；
构造函数（私有用户服务：用户服务，公共协议服务：协议服务，私有msalService:msalService）{
this.activeBtn=0；
此.previousSection=-1；
this.hourstuntil=null；
this.todaysDate=新日期（）；
//在页面加载中加载第一个索引内容：
this.currentUser=this.userService.getCurrentUser（）.id；
}
恩戈尼尼特（）{
this.getOutstandingAgreements（this.currentUser）；
}
CheckiFlasAgreement（仅更新：编号）{
this.agreementLength==justUpdated+1？this.lastAgreement=true：this.lastAgreement=false；
}
第（）节{
如果（this.lastAgreement）{this.endOfAgreements=true；}
this.currentIndex=this.activeBtn；
this.checkiFlasAgreement（this.activeBtn+1）；
this.activeBtn=this.activeBtn+1；
//如果（agreementChoice==真）{
更新（已接受）；
//用户选择“同意”，以便查看下一个协议
this.agreementAgreed=true；
//设置上一节，以便添加商定的指标
this.previousSection=this.activeBtn-1；
//仅当用户不在上次可查看的协议中时，才调用下一节！
//tslint:禁用下一行：无未使用的表达式
if（this.activeBtn！==this.agreementLength）{
this.getNextSectionContent（this.activeBtn）；
}
}
declineSection（）{
this.currentIndex=this.activeBtn；
this.hideEverything=true；
}
提醒者（）{
this.currentIndex=this.activeBtn；
本次更新（延期）；
}
getNextSectionContent（内容索引：编号）{
//获取协议的滚动高度
this.agreementScrollHeight=this.scroll.nativeElement.scrollHeight；
//计算下一个协议的剩余天数
此.CalculateMainingDaysLeft（内容索引）；
this.agreementData=this.myData[contentIndex].data；
this.scroll.nativeElement.scrollTop-=this.agreementScrollHeight；
}
公共getOutstandingAgreements（Id:编号）{
this.agreementsService.getOutstandingAgreements（Id）.subscribe（（数据：AgreementsModel[]）=>{
如果（data.length>0）{
this.myData=数据；
this.agreementData=this.myData[0].data；
this.agreementLength=this.myData.length；
此.CalculaterMainingDaysLeft（0）；
}
});
}
CalculateMainingDaysLeft（内容索引：编号）{
this.hoursTill=null；//重置此值
this.daysUntil=differenceInDays（this.myData[contentIndex].reviewIndoweExpiry，this.todaysDate）；
如果（此.daysUntil<1）{
this.hoursTill=differenceInHours（this.myData[contentIndex].ReviewIndowExpiry，this.todaysDate）；
this.daysUntil=null；
}
}
更新=（userAgreementStateId:number）=>{
this.agreementsService.updateAgreement（this.myData[this.currentIndex].userAgreementId，
userAgreementStateId，
这个.currentUser）。然后（（）=>{
});
返回false；
}
返回协议（）{
this.hideEverything=false；
}
确认拒绝{
本次更新（已拒绝）；
this.msalService.logout（）；
}
}

您可以收听动态创建的组件输出：

componentRef.instance.outputName.subscribe(() => this.closeModal())

因此，我的理解是，上面的代码应该放在loadChildComponent方法中。一个在模态组件上定义的属性。在您的示例中，它是outputName。这个属性需要从协议组件访问。是否正确？如果上面的代码正确，我应该如何从协议组件访问该属性。