如何添加MatButtonModule Angular
MatButtonModule是Angular框架中的一个模块，用于添加和管理按钮组件。它提供了一些常用的按钮样式和功能，使开发者能够快速创建交互式的用户界面。
MatButtonModule的主要特点和优势包括：
- 提供丰富的按钮样式：MatButtonModule提供了多种按钮样式，包括基本按钮、浮动按钮、图标按钮等，开发者可以根据需求选择合适的样式。
- 简化按钮事件处理：MatButtonModule封装了常见的按钮事件处理逻辑，开发者只需通过指令或绑定事件即可实现按钮的点击、禁用等功能。
- 支持响应式设计：MatButtonModule支持响应式设计，可以根据不同的屏幕尺寸和设备类型自动调整按钮的布局和样式，提供更好的用户体验。
- 集成其他Angular模块：MatButtonModule与其他Angular模块无缝集成，可以与表单模块、对话框模块等一起使用，实现更复杂的交互功能。
MatButtonModule的应用场景包括但不限于：
- 表单提交按钮：在表单中添加MatButtonModule，可以为提交按钮添加样式和事件处理逻辑，实现表单数据的提交和验证。
- 页面导航按钮：通过MatButtonModule可以创建导航按钮，实现页面之间的跳转和导航功能。
- 操作按钮：在各种操作界面中，可以使用MatButtonModule创建各种操作按钮，如保存、删除、编辑等。
推荐的腾讯云相关产品和产品介绍链接地址：
腾讯云提供了丰富的云计算产品和服务，其中与Angular相关的产品包括云服务器、云数据库、云存储等。您可以通过以下链接了解更多信息：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
请注意，以上链接仅供参考，具体的产品选择和使用需根据实际需求进行评估和决策。
相关·内容
我更新了angular版本8到angular 9，也更新了angular材质到版本9，但它不工作，也没有显示任何错误。如何修复它。 以下是代码材料模块 import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: [],
imports: [
MatButtonModule
]
})
export class MaterialModule { }
浏览 32提问于2020-02-14得票数 3
回答已采纳
3回答
我有一个对话框组件，里面有两个垫子按钮，但是由于某种原因，垫子按钮样式不适用。按钮样式可以在其他组件中使用，但我不确定为什么它不适用于这个对话框组件。
<button mat-raised-button color = "primary"(click)="onNoClick()" style="margin-left:100px;">No, I'm still working.</button>
<button mat-raised-button color = "primary
浏览 2提问于2020-04-15得票数 1
我最近将我的项目从Angular 8更新到了9，但angular材质导入存在问题。我还更新了angular材质。
但是，角度材质导入会产生错误。我也试着卸载并添加了angular-material，但没有成功。我现在该怎么做？提前谢谢你
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {BrowserAnimationsModule} from '@angular/pl
浏览 12提问于2020-02-19得票数 1
2回答
我正在尝试使用angular-6的angular-material
我的material.module.ts是这样的
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/ic
浏览 0提问于2018-05-29得票数 2
1回答
我希望将所有样式移动到单个样式表中，而不是单个组件样式。我可以控制我的样式，但是当我包含@角/材料组件时，它们作为单独的样式标签添加：
我有一个styles.scss文件，其中已经包括根据的材料设计。
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
如何将所有组件添加到单个样式表中？
编辑：@angular/material模块是这样添加的：
import { NgModule } from '@angular/core';
import {
浏览 0提问于2018-11-12得票数 1
回答已采纳
每当我添加一个新的材料指令/组件时，我总是会收到这个可怕的错误：
Uncaught Error: Template parse errors:
'mat-input' is not a known element:
1. If 'mat-input' is an Angular component, then verify that it is part of this module. **(By doing what, asshole?)**
2. If 'mat-input' is a Web Component then add '
浏览 0提问于2018-01-06得票数 6
回答已采纳
1回答
我在material.module.ts文件中添加了像这样的角度材料模块。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModu
浏览 15提问于2022-03-21得票数 1
回答已采纳
我一直试图在文章中使用角度材料，但仍然是徒劳的。每次我包含任何mat-input时，我都会得到一个错误，即使我已经导入了它的所有依赖项。下面是我的代码所在的组件
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
浏览 18提问于2019-10-25得票数 1
回答已采纳
我目前正在尝试找出避免Angular共享模块中循环依赖的正确决策。
我已经在我的项目中共享了模块，其中包括我在整个项目中使用的所有常用的angular模块。
我的共享模块：
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import {
MatSnackBarModule,
MatButtonModule,
MatCheckboxModule,
MatRadioModule,
浏览 0提问于2018-05-31得票数 4
在app文件夹中，还有另一个子module，称为login.There，分别是login.component.ts、login.module.ts和login.component.html。我想在login.component.html上使用angular-material。如果我在login.module.ts中导入材料组件，那么它可以正常工作。但是如果我在app.module.ts中导入，它就不能再工作了。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import {Bro
浏览 0提问于2017-12-15得票数 0
1回答
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AngularFireModule } from 'angularfire2'
import { AngularFireAuthModule } from 'angularfire2/auth';
impor
浏览 1提问于2018-10-26得票数 0
在安装角7项目时，我将收到下一个错误：
未知错误:由模块'AppModule‘声明的意外模块'MatFormFieldModule’。请添加一个@管道/@指令/@组件注释。
我正在将app.module.ts代码放在下面：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module
浏览 0提问于2019-01-05得票数 0
1回答
，它在工作，
import { MatButtonModule } from '@angular/material/button'
import { MatMenuModule } from '@angular/material/menu'
不工作
import { MatButtonModule,MatMenuModule } from '@angular/material'
你觉得会是什么原因？
浏览 3提问于2020-03-11得票数 0
回答已采纳
2回答
我在我的共享模块方法中遇到了一个奇怪的问题。 在我的共享模块中，我有以下内容 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input'
import {MatButtonM
浏览 34提问于2021-11-04得票数 0
回答已采纳
我在一个Angular项目中使用素材。
除了matInput之外，我使用的所有材质组件都可以工作。
我很好地导入了组件，我的印象是它被很好地检测出来了，但它的css没有被考虑在内。
import { MatInputModule } from '@angular/material/input';
import { NgModule } from '@angular/core';
import { MatButtonModule } from "@angular/material/button";
import { MatFormFieldModu
浏览 0提问于2021-04-05得票数 2
5回答
我创建了一个定制的角材料模块，material.module.ts文件，并在这个文件中导入如下的角材料UI组件，如下所示。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatBadgeModule,
MatSidenavModule,
MatListModule,
Ma
浏览 7提问于2021-09-10得票数 21
2回答
角4更改主页url和组件
、、、
我有一个带有登录和注册页面的Range4应用程序，然后我们有这个界面来管理我的员工和类似的东西。
我想在一个特定的页面上启动我的应用程序，这个页面就是登录页面，比如：
http://localhost:4200/login
如何使登录页面出现在角启动，并在其中包含/login段？
这是我的app.module.ts文件：
import { UserService } from './user.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule
浏览 1提问于2018-03-12得票数 3
回答已采纳
1回答
我刚开始学习角5，我需要用角度材料来做我的造型和布局。
到目前为止所做的事情: 1. npm安装--保存“角/材料”，角/cdk 2.将模块导入到app.module.ts的@NgModule中并导出。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { AppComponent } from
浏览 4提问于2017-12-20得票数 0
我在做角度4的工作，我试图设置材料包，这里我试着尝试对话框，但是它不起作用，也许是因为材料包，我不确定。
这是我的(dialog.components.ts)：
import {Component, OnInit} from '@angular/core';
import {MatDialogRef} from '@angular/material'
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
s
浏览 3提问于2017-12-14得票数 15
回答已采纳
import { NgModule } from '@angular/core';
import { MatButtonModule,MatMenuModule , MatTabsModule , MatToolbarModule,MatIconModule, MatCardModule} from '@angular/material';
@NgModule({
imports: [
MatButtonModule,
MatTabsModule,
MatMenuModule,
MatToolbarModule,
浏览 2提问于2018-10-12得票数 1
回答已采纳
1回答
我试着去看一个关于角质的故事。然而，在故事中，按钮没有任何样式。我使用：ng add angular/material和这些ara文件为我的组件导入了角材料：
这是html文件：
<button mat-button color="primary">Button Material</button>
这是我的库的模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Route
浏览 13提问于2022-04-25得票数 2
回答已采纳
我在试着增加角质材料的成分。但是组件没有正常工作。那个错误说
Uncaught Error: Template parse errors: 'mat-option' is not a known element:
// ...
我认为错误来自于app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from '
浏览 0提问于2018-08-28得票数 25
回答已采纳
我检查过这些问题：
我遵循了这个教程：
以前我用过角质材料，但对此它是行不通的：
compiler.js:1016未明错误:模板解析错误：“mat-按钮-切换”不是已知的元素: 1.如果“mat-按钮-切换”是一个角度组件，那么验证它是否是该模块的一部分。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { T
浏览 0提问于2018-08-30得票数 11
回答已采纳
我不能以任何方式使用角/5角的材料。我遵循这个，但是每当我在组件HTML中插入一些材料标签时，网页就会变成空白。
当使用ng serve时，角CLI不显示任何问题。
属地：
"dependencies": {
"@angular/animations": "^5.0.5",
"@angular/cdk": "^5.0.0-rc.2",
"@angular/common": "^5.0.0",
"@angular/compiler": &
浏览 2提问于2017-12-02得票数 19
回答已采纳
1回答
我正在实现树导航使用文件从官方的角度材料网站。当使用‘mat-图标-rtl-镜像’CSS类呈现图标时，浏览器显示的是图标的名称，而不是实际的图像。
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
我得到的结果是这样的
当它真的应该是这样
我还附加了我的app.module.ts
import { Brows
浏览 1提问于2019-07-11得票数 2
回答已采纳
我正在向angular应用程序的app.component.html文件中添加一个工具条组件，但我一直收到错误信息
../node_modules/@angular/material/esm2015/bottom-sheet.js
Module not found: Error: Can't resolve '@angular/animations' in 'C:\Users\liam\DBSTUF\codethemeanway\node_modules\@angular\material\esm2015'
我尝试添加不同的import语句，例如
imp
浏览 0提问于2019-06-18得票数 0
在我的角度应用程序中，当我在送礼-routing.module.ts中添加路由时，会出现此错误，当我删除路由时，它会工作，但我仍然需要路由，所以如何解决此错误？
ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]:
StaticInjectorError(Platform: core)[FormBuilder]:
NullInjectorError: No provider for FormBuilder!
NullInjectorE
浏览 6提问于2020-02-18得票数 5
回答已采纳
我看过其他问题，但都没有结果。
<mat-form-field>
<mat-select matInput placeholder="Favorite food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
基本选择器。当我在浏览器中
浏览 1提问于2018-11-17得票数 1
回答已采纳
2回答
我有一个角度项目，在这个项目中，我试图使用角材料库。在我的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
浏览 5提问于2021-09-25得票数 5
3回答
我正在使用mat-icon，在某些浏览器上，mat-icon显示文本而不是实际的图标，或者它可以显示文本，直到导入图标为止。我尝试导入：
@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';
发送到我的style.css，但这并没有解决问题。有没有办法防止在图标加载之前显示文本，甚至根本不显示文本？
import {
MatButtonModule,
M
浏览 0提问于2020-06-02得票数 4
2回答
为了避免从角材料中导入模块，我创建了一个单独的角模块AppCustomMaterialModule，并将其导入主模块AppModule中。该主模块(AppMenuComponent)的一个组件应该使用输出的角材料模块之一。但是，虽然AppCustomMaterialModule是在AppModule中导入的，但在AppMenuComponent中却找不到。直接进口工程。错误信息：Module ...app-custom-material-module/app-custom-material.module' has no exported member 'MatMenuTrigg
浏览 5提问于2017-11-20得票数 0
回答已采纳
2回答
刚开始学习角质材料，并立即陷入按钮造型问题。
我已经将MatButtonModule添加到我的应用程序中。
模块的代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { View1Component } from './view1/view1.component';
import { View2Component } from './view2/view2.component';
im
浏览 1提问于2021-03-05得票数 0
回答已采纳
我有一个棱角分明的应用程序，但我不知道如何将MatButtonModule、MatMenuModule、MatIconModule添加到我的项目中。
每当我试图这样做时，我都会得到以下错误：
“模块没有导出成员”
我相信这可能与角质材料的安装有关，但我不太确定。
MatButtonModule、MatMenuModule、MatIconModule在我的IDE中都是红色的，但是我现在有MatFormFieldModule和MatInputModule，这些都很好。
即使我将它们添加到Imports部分，也于事无补。
这是我为app.module.ts编写的代码，有什么特别之处：
import
浏览 0提问于2020-04-12得票数 1
回答已采纳
我正在构建一个简单的角度应用程序，使用角度材料设计前端。这个应用程序只有两个组件在同一个页面中呈现。当我为应用程序提供服务时，它将返回到控制台中：
NullInjectorError："StaticInjectorError(AppModule)RouterScroller -> ViewportScroller: StaticInjectorError(平台:核心)RouterScroller -> ViewportScroller: NullInjectorError：！“
AppModule.ts
import { BrowserModule }
浏览 2提问于2019-07-03得票数 22
回答已采纳
建议创建一个包含多个组件的共享模块。这里我的问题是关于共享模块的使用。
共享角材料模块
import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';
@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule],
})
export
浏览 2提问于2019-08-31得票数 7
回答已采纳
1回答
我现在正在切换这个，希望更模块化和更好的设计，但仍然是同样的问题，html文件无法看到材料组件。
我所做的是从app.module中删除所有内容。我有一个共享组件，它可以导入和导出我在datafile.module中声明的共享组件，它还声明了数据文件列表组件和html...
文件的层次结构如下：
app/shared/edxMoaterailModule
app/datafile/datafile.module.ts
app/datafile/datafile-list/datafile-list.component(.ts和.html)
我认为应该起作用的是什么，那么我如何让我的共享材料模块
浏览 6提问于2019-08-19得票数 0
1回答
我正在尝试将我的HTTP服务注入另一个服务中。我不知道我做错了什么，我一直搞错了
不能解析GanttPropertyService的所有参数：(?)。
这是我的服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';
@Injectable({
providedIn: 'ro
浏览 2提问于2019-10-07得票数 0
回答已采纳
我已经创建了一个新项目，我正在尝试添加angular-material。
我在我的material.module.ts文件夹中创建了app：
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
浏览 0提问于2018-05-03得票数 30
回答已采纳
1回答
我用角的cli创建了我的角项目。在那之后，我遵循了这个指南
现在一切就绪，我创建了这样一个材料模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/m
浏览 1提问于2018-01-21得票数 1
回答已采纳
这是我的app.module我尝试用material.angular.io完成完整的指令 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrandComponent } from './brand/brand.component';
import { Alert
浏览 27提问于2019-05-09得票数 3
回答已采纳
1回答
我还是不明白。我想我已经导入了所有必要的模块，但它一直告诉我：
'mat-button' is not a known element:
app.module.ts：
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { BrowserModule } from '@
浏览 4提问于2018-12-07得票数 14
回答已采纳
我收到了这个错误
没有为MechanicDataCollectionComponent找到组件工厂。你把它加到@NgModule.entryComponents上了吗？
我甚至将MechanicDataCollectionComponent添加到入口点，但仍然会出现错误。
下面是我的管理版面。
import {
MatButtonModule,
MatInputModule,
MatRippleModule,
MatFormFieldModule,
MatTooltipModule,
MatSelectModule,
MatTabsModule, MatTable
浏览 3提问于2021-02-05得票数 0
在我将服务(dish.service.ts)添加到我的项目之前，我刚刚开始学习angular，一切都很顺利。
这是错误。/src/app/services/dish.service.ts模块解析失败:意外令牌(15:13)您可能需要适当的加载器来处理此文件类型。
dish.service.ts
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { Dishes } from '../shared/dishes'
浏览 4提问于2018-09-12得票数 0
我有一台MaterialModule import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
declarations: [],
imports: [
MatButtonModule,
MatIconModule
]
})
export class Mate
浏览 19提问于2020-11-24得票数 0
回答已采纳
1回答
我是角6和角材料的新手，我试着创建一个例子来检查index.html中带有ASP.NET核心1.1应用程序的角材料，但是它不起作用。我的代码如下。
索引HTML:
<!DOCTYPE html>
<html>
<head>
<title>Angular 6</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="
浏览 1提问于2018-09-21得票数 1
回答已采纳
我已经在我的app.module.ts文件中导入了匹配器，但是仍然显示了一些错误。我不能让材料部件起作用。该按钮工作良好，并使用角质材料组件。但是当我使用datepicker时，它就不起作用了。
app.module.ts文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import{ HttpClientModule} from '@angular/common/http';
import
浏览 0提问于2019-06-08得票数 30
回答已采纳
什么是将材料模块导入到角8项目中的最佳方法？是否将material.module.ts导入app主模块，然后在其他模块中使用：
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule
} from '@angular/material';
@NgModule({
imports: [
MatButtonModule,
浏览 1提问于2019-07-15得票数 3
回答已采纳
在执行单元测试时，我会得到以下错误：
错误：‘mat-form-field’不是已知的元素错误：‘mat-grid-tile’不是已知的元素。
等。
通常，当app.module.ts中缺少导入时，您会得到这些错误，但我确保它们是可用的：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angu
浏览 0提问于2020-08-10得票数 0
回答已采纳
我正在使用Angular 9，并且我有以下模块声明
const moduleRoutes: Routes = [
{
path: '',
component: HomeComponent,
}
];
@NgModule({
declarations: [HomeComponent],
providers: [HomeService],
imports: [
RouterModule.forChild(moduleRoutes),
CommonModule,
MatButtonModule,
FlexLayou
浏览 0提问于2020-04-19得票数 2
我使用的是Angular Material 7.2.2版本，当我运行我的组件时，我在Chrome上一直收到以下错误。 ? 在下面的gist中，我的shared.module.ts中正确地导入了这些库。 受影响的HTML文件的代码如下。 <div fxLayout="column">
<mat-nav-list fxFlex fxLayout="column">
<mat-list-item *ngFor="let item of menuItems"
浏览 11提问于2019-03-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
