子组件不显示包含组件的 Angular Material 设计

Question

我有一个使用 Angular Material 组件的组件，它的设计效果很好。

但是在这个组件中还有另一个组件被定义为

standalone:false

并且它也使用了 Angular Material 的相同组件，但是它的设计根本不起作用 - 也就是说，它不会导致编译错误，但只是不引用Angular Material 的设计。

在导入中这不应该成为问题，因为在包装组件中设计效果很好。

我尝试将

encapsulation: ViewEncapsulation.None

添加到外部组件 但这并没有帮助

附上代码：

import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { Customer } from '../../Models/Customer';
import { customerService } from '../../services/costumer.service';
import { MaterialModule } from '../../material/material.module';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CommonModule } from '@angular/common';
import { MatTableDataSource } from '@angular/material/table';
import { MatDialog } from '@angular/material/dialog';
import { MatDialogRef } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
@Component({
  selector: 'customer-list',
  standalone: true,
  imports: [MaterialModule, CommonModule],
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class CustomerListComponent implements OnInit, OnDestroy {
  displayedColumns = ['first_Name', 'last_Name', 'address', 'phone', 'email', ' '];
  dataSource: MatTableDataSource<Customer> = new MatTableDataSource<Customer>();
  private customersSubscription?: Subscription;

  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private customerService: customerService, private router: Router, public dialog: MatDialog) {}

  ngOnInit(): void {
    this.loadCustomers();
  }

  loadCustomers(): void {
    this.customersSubscription = this.customerService.customers$.subscribe({
      next: customers => {
        this.dataSource.data = customers;
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      },
      error: error => {
        console.error('Error loading customers:', error);
      }
    });
  }

  ngOnDestroy(): void {
    if (this.customersSubscription) {
      this.customersSubscription.unsubscribe();
    }
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  addCustomer(): void {
    this.router.navigate(['/customer-details', -1]);
  }

  editCustomer(selected: Customer): void {
    this.router.navigate(['/customer-details', selected.id]);
  }

  deleteCustomer(customer: Customer): void {
    const dialogRef = this.dialog.open(ConfirmDialog);

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.customerService.deleteCustomer(customer.id!).subscribe({
          next: () => {
            console.log('Customer deleted successfully');
          },
          error: error => {
            console.error('Error deleting customer:', error);
          }
        });
      }
    });
  }
}

/*-------------------------confirm-dialog-component----------------------------------------- */

@Component({
  selector: 'confirm-dialog',
  template: `
    <div >
      <h1 mat-dialog-title>Confirm Deletion</h1>
      <div mat-dialog-content>Are you sure you want to delete this client?</div>
      <div mat-dialog-actions>
        <button mat-button (click)="onNoClick()" >No</button>
        <button mat-button color="primary" (click)="onYesClick()" cdkFocusInitial>Yes</button>
      </div>
    </div>
  `
})
export class ConfirmDialog  {
  constructor(public dialogRef: MatDialogRef<ConfirmDialog>) {}

  onNoClick(): void {
    this.dialogRef.close(false);
  }

  onYesClick(): void {
    this.dialogRef.close(true);
  }
}

我真的很感激任何关于问题可能是什么的提示

Answer 1

该对话框在应用程序的根目录中打开，与打开它的组件（样式）无关。因此，对话框组件最好有自己的导入和样式。我们还可以将其设置为独立的，因为它独立于任何其他组件工作。

@Component({
  selector: 'confirm-dialog',
  standalone: true,
  styles: [``],
  imports: [MaterialModule, CommonModule],
  template: `
    <div >
      <h1 mat-dialog-title>Confirm Deletion</h1>
      <div mat-dialog-content>Are you sure you want to delete this client?</div>
      <div mat-dialog-actions>
        <button mat-button (click)="onNoClick()" >No</button>
        <button mat-button color="primary" (click)="onYesClick()" cdkFocusInitial>Yes</button>
      </div>
    </div>
  `
})
export class ConfirmDialog  {
  constructor(public dialogRef: MatDialogRef<ConfirmDialog>) {}

  onNoClick(): void {
    this.dialogRef.close(false);
  }

  onYesClick(): void {
    this.dialogRef.close(true);
  }
}