小编New*_*Nik的帖子

我正在尝试实现一个移动风格的底部导航栏。为此，我使用了 mat-toolbar 并使用 css 将其固定在底部，如下所示：

组件.html：

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

组件.css

.toolbarNav{  
    position: fixed;
    bottom: 0; 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 2px 4px 5px …

我想屏蔽材料日期控制，为此我尝试了两个 npm 模块。首先，我使用了ngx-mask并得到了这个错误：

ERROR 错误：多个自定义值访问器匹配具有未指定名称属性的表单控件

错误的原因是; ngx 在它们的实现中使用了 ValueAccessor，但是 angular 有一个限制 -> 我们只能使用一个实现 ValueAccessor。这就是 ngx-mask 不适用于材质的原因。参考

第二种解决方案是VanillaTextMask.js，我得到了一些异常行为：

如果您尝试诸如“06/11/1983”之类的日期，您将看到模型值为“06/11/1983_”，如果您键入另一个数字，它将被附加。参考

那么，任何人都可以提供一些其他解决方案来实现角度材料输入控制的屏蔽吗？

我是编程新手。这里我有一个 antd 模态，我一直在尝试找到一种使其全屏显示的方法。我希望模式在打开时是全屏的，并且不应该有任何边距或填充。例如，在我添加的代码中，width={1000}但模态框的左侧和右侧仍然有一些边距。

那么如何使模态占据整个屏幕而没有任何边距和填充呢？

代码： https://codesandbox.io/s/otjy6?file =/index.js:539-560

我有一个 Angular 项目，我试图在其中使用 Angular 材质库。在我的app-routing.module我有这样的代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SndComingSoonPageComponent } from './feature/pages/snd-coming-soon-page/snd-coming-soon-page.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', component: SndComingSoonPageComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

我正在SndComingSoonPageComponent尝试使用MatIconModule，但无论我在哪里导入它，我仍然无法使用它。

这是我的app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } …

我正在我的角度应用程序中开发登录和主页组件。

登录服务正在验证用户的用户名和密码。

成功登录后，应将用户重定向到主页。

但路由器重定向无法正常工作。

登录组件

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

import { User } from 'src/app/shared/models/user';

import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {

  userName: FormControl;
  password: FormControl;
  loginFormGroup: FormGroup;
  loginError: boolean;
  errorMessage: string;
  messageString: string;

  constructor(private router: Router, private authService: AuthService) { }

  ngOnInit() {
    this.userName = new FormControl("", [Validators.required]);
    this.password = new …

在我的 Angular 11 项目中，我有一个图像上传器组件，用于<input type="file">接受图像并将其发送到服务器。该图像上传器应该只接受 jpg 和 jpeg 格式。

当我将accept属性添加到我的输入时，如下所示：

      <input
        type="file"
        accept="image/png"
      />

我的系统以正确的显示格式打开文件，如下所示：

哪个是对的。它向用户表明它只接受 .png 图像。

但是当我将accept输入中的属性更改为：

      <input
        type="file"
        accept="image/jpg, image/jpeg"
      />

它不再向用户显示他们应该使用哪种格式，如您所见：

它只是说我的 ubuntu 上的自定义文件，我猜 Windows 中的所有文件。这不是我想要的。用户应该能够看到他们只允许在此处添加 jpg 或 jpeg 文件。例如 *.jpg 或 *jpeg。

有没有办法来解决这个问题？