标签: mat-dialog

我正在使用带有主题的 Angular Material。

$my-theme-redish: (...
$my-theme-red: (...
$my-theme-celeste: (...

$my-theme-primary: mat-palette($my-theme-redish);
$my-theme-accent:  mat-palette($my-theme-celeste);
$my-theme-warn:    mat-palette($my-theme-red);

$my-app-theme: mat-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

现在我也想主题/更改border-radius. 我可以在主题中做到这一点吗？我没有找到任何关于此的文档。

我尝试通过使用::ng-deep或直接寻址某些组件来进行主题化：

$my-theme-redish: (...
$my-theme-red: (...
$my-theme-celeste: (...

$my-theme-primary: mat-palette($my-theme-redish);
$my-theme-accent:  mat-palette($my-theme-celeste);
$my-theme-warn:    mat-palette($my-theme-red);

$my-app-theme: mat-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

但没有任何效果。

从 Angular Material 15 开始，mat-dialog 的内容有一些奇怪的 css：

.mat-mdc-dialog-container .mdc-dialog__content {
    color: var(--mdc-dialog-supporting-text-color, black);
}

.mat-mdc-dialog-container .mdc-dialog__content {
    font-family: var(--mdc-dialog-supporting-text-font, "Arial");
    line-height: var(--mdc-dialog-supporting-text-line-height, 14px);
    font-size: var(--mdc-dialog-supporting-text-size, 14px);
    font-weight: var(--mdc-dialog-supporting-text-weight, 500);
    letter-spacing: var(--mdc-dialog-supporting-text-tracking, 1px);
}

此 CSS 将使每个基本文本的显示方式与应用程序的其余部分完全不同。对我来说，不清楚这种行为是设计使然、错误还是我在应用程序中做错了什么？

我想提醒用户他是否闲置了 20 分钟。所以，创建了一个服务。

它在桌面上运行良好，但在手机中没有显示，有时如果屏幕在后台停留几个小时，然后注销对话框屏幕会在我再次进入页面后开始倒计时。

我的意思是它应该注销，我应该看到登录页面，但在这里它会在几个小时后显示注销警报倒计时页面，否则它不会显示在移动浏览器中。

这是我的代码，请让我知道我缺少哪个逻辑。

这是 Service.ts 文件。check() 将每 5 秒调用一次，注销警报将在 20 秒后显示...

const MINUTES_UNITL_AUTO_LOGOUT = 0.2; // 1 mins- 20
const CHECK_INTERVAL = 5000; // checks every 5 secs- 5000

@Injectable({
  providedIn: "root",
})
export class AutoLogoutService {
  logOutInterval: any;

  constructor(
    private localStorage: LocalStoreManager,
    private authService: AuthService,
    public dialog: MatDialog
  ) {
    this.localStorage.savePermanentData(
      Date.now().toString().toString(),
      DBkeys.AUTO_LOGOUT
    );
    this.initListener();
  }

  initListener() {
    document.body.addEventListener("click", () => this.reset());
    document.body.addEventListener("mouseover", () => this.reset());
    document.body.addEventListener("mouseout", () => this.reset());
    document.body.addEventListener("keydown", () => this.reset());
    document.body.addEventListener("keyup", () …

我有一个调用GET请求的垫表。另外，我有一个 Mat Dialog，它接收数据并保存点击调用POST请求。一切正常，但有时在我单击“保存”按钮后表格会更新，但有时不会（我必须重新加载页面并查看它更新）。

mat-dialog.component.ts

onSubmit() {  // This method is called on the button click in Mat-Dialog
    if(this.formdata.invalid) {
      return;
    }
    this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => {
      this._snackBar.open('New Question Category Added Successfully', '', {
        duration: 7500,
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition
      });
    });
  }

main.component.ts

constructor(private adminCategory: AdminCategoryService, private fb: FormBuilder, public dialog: MatDialog) { 
    dialog.afterAllClosed.subscribe(() => {
      console.log(''); // This line gets called everytime on close of the modal
      this.getTableData(); // So this line also gets called but not …

我是角度新手。我正在尝试为 mat 对话框编写单元测试，但它会引发错误。

我在 ts 文件中的方法：

isMobileScreen= Observable<BreakpointState>= this.breakpointObserver.observe('(max-width:600px)');
    
    OpenDialog(){
      if(index===0){
        this.dialogref=this.dialog.open(MyComonent,{
        maxWidth:'600px'
        });
    
        Const dialogSub= this.isMobileScreen.subscribe(result=> {
        if(result.matches){
         this.dialogref.updatesize('100%','100%');
        }
        else{
         this.dialogref.updatesize('50%');
        }
    });
    
    this.dialogref.afterclosed(). subscribe (results=>{
      dialogSub.unsubcribe():
    });
   }

规格文件

       class isMobileScreen {
            Value= new subject ();
            isMobileScreen= this.value.asObservable();
            setValue(val){ // getting error here cannot read property 'setvalue' of undefined
             this.value.next(val);
            }
         }
        
      //  Inside describe    
     
    
       describe('component', ()=>{
          ...
        Let isMobileScreen: isMobileScreen;
        Const dialogRefMock={
              afterClosed(){
                    return of(true);
               },
               updatesize(width?:string, height?: string){}
         };
         Const dialogMock={ open:()=> dialogRefMock};
    
         // Inside …

我正在使用 Angular 8。我正在读取 svg 文件，并找到样式为中风的元素：无。然后，只要有人将鼠标悬停在该元素上，就会打开一个对话框。对话框正在打开，但当我单击外部或关闭按钮时它没有关闭。

我尝试了按钮 id="btn" 的相同对话框，它成功关闭。

没有错误出现。

main.component.html

<object id="svg-object" data="assets/svg/xxx.svg" type="image/svg+xml"></object>

<button mat-button id="btn">Launch dialog</button>

主要组件.ts

ngOnInit() {
    this.myfunction();

    $('#btn').mouseover(() => {
      this.openDialog();
    });
}

openDialog() {
    const dialogRef = this.dialog.open(DialogBoxComponent, {
      height: '100px',
      width: '450px',
    });
  }

myfunction() {
    const component = this;
    const mySVG: any = document.getElementById('svg-object');
    mySVG.addEventListener('load',() => {
      svgDoc = mySVG.contentDocument;

      $(svgDoc).find('path').css('fill','fill-opacity','fill-rule','stroke').each(function() {
        const style = $(this).attr('style');

        if($(this).attr('style').includes('stroke:none')) {
          $(this).mouseover(() => {
               component.openDialog();
          });
        }
      });
    }, false);
}

DialogBoxComponent.ts

  constructor(public dialogRef: MatDialogRef<MainComponent>) …

快速提问。到目前为止我找不到答案。有没有办法在最新的 Angular 版本中创建非模态材质对话框？我还在论坛中查找过这个问题，但也找不到针对旧版本 Angular 的解决方案。

我希望得到答复。

最美好的祝愿，尼克

我有一个 MatDialog，它在构造时由其父级提供了一个 HTML 字符串。HTML 字符串是命名 div 内容的来源，并且包含<table>嵌入 html 中的标签，但由于某种原因，对话框的 scss 文件中定义的表格样式不适用于我指定为 的字符串[innerHTML]，尽管它对于<table>标签来说效果很好直接硬编码到html文件中。

有什么方法可以让对话框使用对话框组件的样式模板中包含的样式来渲染innerHTML？

    export class DialogAgreementViewer implements AfterViewInit {
      constructor(public dialogRef:
        MatDialogRef<DialogAgreementViewer>, @Inject
        (MAT_DIALOG_DATA) public data: string, protected _sanitizer : DomSanitizer){
          this.agreementText = this._sanitizer.bypassSecurityTrustHtml(data);
        }
      public agreementText : SafeHtml;
      @ViewChild('agreementText') agreementTextCtl : ElementRef;
    }

HTML：

    <p>Agreement Template</p>
    <table>.          <-- Defined table styles are applied to this table.
        <tbody>
            <tr><td>Title</td><td>Name of Work</td></tr>
        </tbody>
    </table>
    
    <div [innerHTML]='agreementText'></div> <-- Table styles not applied here.

社会保障体系：

    table, td …