Как соединить два компонента в Angular - PullRequest
Новая
       78

Как соединить два компонента в Angular

1 голос
/ 06 апреля 2020

Я новичок в Angular и пытаюсь соединить данные двух компонентов, но не знаю как. У меня есть компоненты страницы редактирования, которые отображают все данные и компонент диалогового окна, если пользователь хочет удалить данные на странице редактирования.

Таким образом, в основном, когда пользователь нажимает кнопку Удалить на странице редактирования, компонент диалогового окна будет отображаться и попросите пользователя подтвердить это (там будет кнопка «Удалить» и «Нет»).

Компоненты диалога TS 

import { Component, OnInit, Inject, Output } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar'
import { WorkspaceService } from 'src/app/core/services/workspace.service';
import { Router } from '@angular/router';

  constructor(
    private workspaceService: WorkspaceService,private router: Router,private snackbar: MatSnackBar,public dialogRef: MatDialogRef<DeleteWsDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

onDeleteClick(){

  this.workspaceService.deleteWorkspace(this.workspace).subscribe(response=>{
    this.gotoManage();
    this.dialogRef.close();
  },error=>{
   this.dialogRef.close();
  })

Редактировать компонент страницы TS 

import { Component, OnInit, SimpleChanges } from '@angular/core';
import {DeleteWsDialogComponent} from '../delete-ws-dialog/delete-ws-dialog.component'
import { WorkspaceService } from 'src/app/core/services/workspace.service';
import { Workspace, WorkspaceType } from 'src/app/shared/models/workspace.model';
import { Router } from '@angular/router';

constructor(private workspaceService: WorkspaceService, private router: Router, private snackbar: MatSnackBar, public dialog: MatDialog) { }

  openDialog(): void {
    let dialogRef = this.dialog.open(DeleteWsDialogComponent, {
      data:{
        workspace: this.workspace
      }
    });
  }

Редактировать страницу HTML (открыть диалоговое окно) 

    <div class="remove-container">
        <button *ngIf = "editMode" mat-raised-button color = "accent" class = "button" (click)="openDialog()" 
        matTooltip = "Delete Workspace">
        <mat-icon class="button-icons">delete</mat-icon>Delete Workspace
        </button>
    </div>

Когда я реализую код onDeleteClick () внутри страницы редактирования TS, он работает, но когда я перехожу внутрь TS диалогового окна, он больше не работает. Кажется, он не подключается

...