标签: angular-material2

我用官方指南创建了一个自定义主题。

@import '../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core();

$primary: mat-palette($mat-teal);
$accent: mat-palette($mat-deep-orange);
$warn: mat-palette($mat-amber);

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

@include angular-material-theme($theme);

它确实有效。md-toolbar我可以设置 a或md-buttonwith的颜色$primary。但我无法访问组件 SCSS 中的颜色变量。

:host {
  .mat-grid-tile-header {
    background-color: $primary;
  }
}

网络风暴中的错误：

"Element 'primary' is resolved only by name without using of explicit imports"

构建失败后出现错误：“未定义的变量”

好吧，我必须以某种方式导入它。但我不明白怎么办。

我尝试过导入主题：

"Element 'primary' is resolved only by name without using of explicit imports"

Webstorm中的错误已经消失，但是构建后出现了新的错误：

Module build failed: 
undefined
            ^
      (50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, 300: #4db6ac, 400: …

我试图找出调用Material 2 Tooltip上的显示和隐藏方法，以便我可以根据组件中的某些条件强制工具提示显示或隐藏它。

我尝试过使用@ViewChild来获取对该指令的引用，但我一定做错了什么。

模板片段：

<button md-mini-fab color="primary" mdTooltip="Menu" [mdMenuTriggerFor]="menu" class="remove-record">
  <md-icon color="white">view_headline</md-icon>
  </button>

组件片段：

export class RackAverageComponent implements OnInit {
    @ViewChild(MdTooltip) save;

    ngOnInit() {
       this.save.show();
   }
}

模板中的指令似乎没有与组件关联。不确定我是否@ViewChild正确使用。

我使用 Angular 并使用 Angular Material [https://material.angular.io/components/autocomplete/api][1] [1]：https://material.angular.io/components/autocomplete/api
我想要在我的 md-autocomplete 中添加边框半径，但它不起作用：

<md-autocomplete  class="myclass">

.myclass{
    background-color: rgb(250, 250, 250);
     border-bottom-left-radius: 50px;
     border-bottom-right-radius: 50px
}

你有解释吗？

在我用于实时网站的package.json构建过程中，我之所以使用它，是因为我希望在我的网站上以 HTML 形式显示许可证。 "build-prod": "ng build --prod --extract-licenses"--extract-licenses

我该如何使用.txtAngular 以 HTML 形式显示此文件？

我想实现一个与 Angular Material自动完成组件一起使用的组件或指令。然而，我很难弄清楚如何封装业务逻辑并将其连接起来，同时仍然暴露输入元素，以便轻松设计样式和添加可访问性。

理想情况下，我希望有一个可以添加到输入中的指令，但我的理解是您需要实例化该<mat-autocomplete>组件。因此，我尝试创建一个组件来实例化该<mat-option>列表。

@Component({
  selector: 'employee-search',
  exportAs: 'employeeSearch',
  template: `
    <mat-option *ngFor="let employee of employees | async" [value]="employee.globalId">
      <span>
        <span>{{ employee.name }}</span> |
        <small>{{ employee.globalId }}</small>
      </span>
    </mat-option>
  `,
})
export class EmployeeComponent implements OnInit {
  control = new FormControl();
  employees: Observable<any[]>;

  constructor(private rest: MyRestService) { }

  ngOnInit() {
    this.employees = this.control.valueChanges
    .filter((value: string) => value && value.length >= 3)
    .debounceTime(300)
    switchMap((value: string) => this.loadEmployees(value));
  }

  loadEmployees(searchInput: string): Observable<any[]> {
    return this.rest.get('/employees', { …

我有 5 个 mat-tab，每个选项卡都有大量数据，因此滚动将添加到该窗口。有什么方法可以修复 mat-tab 的标题并让内容可以滚动。

我尝试放置位置：固定；位置：粘在里面

::ng-deep .mat-tab-label {

}

但这似乎并不能解决问题。我的html

<div class="container">

  <mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
    <mat-tab matTooltip="Tooltip!" label="Pers info">
      <table id="customers" *ngIf="customerData">
        <caption>
          <h4>Customer Information</h4>
        </caption>
        <tr *ngFor="let item of customerData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="aadhaarAddress">
        <caption>
          <h4>Aadhaar Address</h4>
        </caption>
        <tr *ngFor="let item of aadhaarAddress">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="presentAddress">
        <caption>
          <h4>Present Address</h4>
        </caption>
        <tr *ngFor="let item of presentAddress">
          <td class="key" width="50%"> …

I am using Angular Material 2 themes for my Angular 4 app. I have the following themes created in my theme.scss

@import '~@angular/material/theming';
@include mat-core();

$primary-color: mat-palette($mat-grey);
$accent-color: mat-palette($mat-blue, 500, 900, A100);
$warning-color: mat-palette($mat-red);

$dark-theme: mat-dark-theme($primary-color, $accent-color, $warning-color);
$light-theme: mat-light-theme($primary-color, $accent-color, $warning-color);

And in my style.scss, I have the following

@import 'theme.scss';

.dark-theme {
    @include angular-material-theme($dark-theme);
}

.light-theme {
    @include angular-material-theme($light-theme);
}

In my HTML I have hardcoded the dark theme (eventually I want to give the user an option …

题

如何配置在大屏幕和小屏幕上都很好用的材料 cdk 覆盖位置策略？

目标

我的目标是使用Angular 覆盖 CDK创建一个覆盖，遵循以下规则：

• 切勿在视口外放置叠加层
• 最大高度 300 像素
• 位置叠加 y，优先级为顶部，居中底部。
• 在高度低于 300 的屏幕上，使用可用高度。
• 换句话说，没有最小高度。

什么有效

我已经完成了上述一些要求，正如您在此处看到的，定位在具有足够垂直空间（在本例中为 512px）的设备上效果很好：

破损的部分

但是，从下面的 gif 中可以看出，这不适用于垂直空间不足的小型设备（在本例中为 255px）。实际上，正如您从 GIF 中可以看出的那样，在其中两个案例中，它非常接近。位置是正确的，只是高度有偏差。

这里的目标是使用可用空间，如红色所示：

编码

我有一个堆栈闪电战，你可以在这里进行实验。

成分

openPopup(element: any) {
    const overlayRef = this.overlay.create({
      hasBackdrop: true,
      positionStrategy: this.overlay.position()
      .flexibleConnectedTo(element)
      .withLockedPosition()
      .withPositions([
        {
          panelClass: 'custom-panel1',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'top',
        },
        {
          panelClass: 'custom-panel2',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'center',
        },
        {
          panelClass: 'custom-panel3',
          originX: …

我在带有粘性标题的角度材料表上分叉了示例，并添加了更多数据。我看到标题不粘。在这里堆叠闪电战

任何人都知道标题如何保持粘性？

我使用 CLI 创建了一个 Angular 项目。我正在使用 SCSS，并且我在自定义主题 iirc 中包含了 Angular Material。我添加了几个虚拟组件，该应用程序仍然构建得很好。然后我需要使用 Angular Material 来设计我的组件。为此，我添加@use '~@angular/material' as mat;到style.scss文件的第一行。一旦我这样做了，应用程序将不再构建。它总是抛出以下错误：

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ?
1 ? @use '~@angular/material' as mat;
  ? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ?
  src/styles.scss 1:1  root stylesheet

我不知道我做错了什么；我的印象是，以这种方式导入 Angular Material 会奏效。难道我做错了什么？

style.scss如果有帮助，这是我的整个文件：

@use '~@angular/material' as mat;

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your …