例如，我有这个代码，它word用minlength6 个字符的验证器初始化。然后当长度word大于 4 时minlength设置为 8 个字符。

问题是，当您输入第五个字符时，更改不会立即可见，但在您输入第六个字符或删除一个或多个字符后，更改是可见的。

this.registerForm = this.formBuilder.group({ 
  word: [null, [Validators.required, Validators.minLength(6)]
}, {validator: this.validateNumber});

validateNumber(input: AbstractControl) {
  if(input.get("word").value != null && input.get("word").value.length > 4) {
    input.get("word").setValidators([Validators.required, Validators.minLength(8)]);
  }
}

我在plunker上创建了这个例子。当您开始在输入框中输入时，会出现 错误minlength，当您输入第六个字符而不是第五个字符时，它会从 6 变为 8。

我可以在表格中获取复选框以在选中/取消选中时发出更改，但是在单击地图图钉以切换复选框状态时遇到问题。

我的带地图的桌子

这是我的表：

      <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="number">
          <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
          <mat-cell *matCellDef="let stock">
            // #myCheckbox needs to be unique
            <mat-checkbox #myCheckbox [checked] (change)="selectStock(stock, $event)"></mat-checkbox> <a href="">{{ stock.number }}</a>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickRow(row._id,$event)"></mat-row>
      </mat-table> 

然后从我的地图上，当你点击一个大头针时，运行一些功能

  (click)="someFunction(myCheckbox)"

在我的班级

    @ViewChild('myCheckbox') private myCheckbox: MatCheckbox;

    someFunction(myCheckbox){
         if (stock.isChecked) {
            this.myCheckbox.checked = false;
            } else {
            this.myCheckbox.checked = true;
         }
    }        

这是我正在处理的示例，但它对每个复选框应用了相同的 #id，因此只有第一个复选框被切换（我假设每个复选框都需要唯一的唯一 ID？）

• 角垫复选框 getElementById

我想注册一个新的 Material2 图标，我有这个代码：

import {Component, OnInit} from '@angular/core';
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'app-control-panel',
  templateUrl: './control-panel.component.html',
  styleUrls: ['./control-panel.component.scss']
})

export class ControlPanelComponent implements OnInit {

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

    console.log('registering  play button icon');  // << confirm

    iconRegistry.addSvgIcon('play_button',
      sanitizer.bypassSecurityTrustResourceUrl('assets/images/play-button.svg'));
  }

  ngOnInit() {
  }

}

上面的日志语句正在被命中。我有这个 HTML

  <button mat-raised-button color="accent">
    <mat-icon>play_button</mat-icon>
    Start Recording
  </button>

如果我使用现有的图标它可以工作，但如果我使用“play_button”它不起作用。

有谁知道可能会出什么问题？

我正在尝试使用 Azure B2C Active Directory 实施身份验证。一切正常，我可以使用特定策略登录并从 B2C 活动目录中获取 access_token。但是，当我尝试在登录 url 的范围内传递值“offline_access”以获取刷新令牌时，它返回一条错误消息，我无法登录。我正在使用 Angular 5 的 ADAL（Azure 目录身份验证库）对 Azure AD 进行身份验证。

这是我的角度 ADAL 配置代码的图像

这是我尝试在 url 范围内传递“offline_access”值时遇到的问题图像

完整的错误信息：

http://localhost:4200/dashboard#error=invalid_request&error_description=AADB2C90012%253a+The+scope+ 'openid+offline_access'+provided+in+request+is+not+supported.%0D%0ACorrelation+ID%253a+05f9f8b0- a8a0-4fdc-9cca-50a4e81a929c%0D%0ATimestamp%253a+2018-01-17+04%253a35%253a36Z%0D%0A&state=a878cc7f-6d87-47e6-a095

我在这里错过了什么吗？或者有另一种方法来获取刷新令牌？

我将我的 Angular 版本从 4 更新到 5。下面是截图，我按照链接http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017的说明进行操作/

package.json 文件

{
  "name": "VotingWebsite",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "5.2.1",
    "@angular/common": "5.2.1",
    "@angular/compiler": "5.2.1",
    "@angular/compiler-cli": "5.2.1",
    "@angular/core": "5.2.1",
    "@angular/forms": "5.2.1",
    "@angular/http": "5.2.1",
    "@angular/platform-browser": "5.2.1",
    "@angular/platform-browser-dynamic": "5.2.1",
    "@angular/platform-server": "5.2.1",
    "@angular/router": "5.2.1",
    "@ngtools/webpack": "1.9.5",
    "@types/chai": "4.1.1",
    "@types/jasmine": "2.8.5",
    "@types/webpack-env": "1.13.3",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.4.1",
    "popper.js": "^1.12.5",
    "bootstrap": "4.0.0",
    "chai": "4.1.2",
    "css": "2.2.1",
    "css-loader": "0.28.9",
    "es6-shim": "0.35.3",
    "event-source-polyfill": …

我正在寻找实现多租户路由机制，其URL应如下所示：

myapp.com/tenant-1/dashboard, 
myapp.com/tenant-2/dashboard.

我有一个常量，它应该可供其他导入我的模块使用。

我有 Datepicker 指令，它定义了日期格式常量（我有这样的指令，所以使用我的指令的人可以使用这些常量）：

export const DATETIME_FORMAT = 'DD/MM/YYYY HH:mm:ss';
export const DATE_FORMAT = 'DD/MM/YYYY';
export const TIME_FORMAT = 'DD/MM/YYYY';

以及用于进一步导出它们的 NgModule。这个模块被构建，然后在其他项目/模块中使用。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatepickerDirective, TIME_FORMAT, DATETIME_FORMAT, DATE_FORMAT } from './datepicker.directive';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    DatepickerDirective,
    DATE_FORMAT,
    DATETIME_FORMAT,
    TIME_FORMAT
  ],
  declarations: [
    DatepickerDirective
  ]
})
export class DatepickerModule { }

但是当尝试构建它时，我收到错误：

ERROR in src/app/datepicker/datepicker.module.ts(5,11): error TS2345: Argument of type '{ imports: (typeof CommonModule)[]; exports: (string …

我有这些领域：

field1
field2
field3
field4

this.form = this.formbuilder.group({
  'field1' = ['', [<control-specific-validations>]],
  'field2' = ['', [<control-specific-validations>]]
 }, { validator: isField1GreaterThanField2Validator}
 });

我需要更多验证：

- field3.value must be greater than field4.value
- field3.value must be greater  than field2.value + 1
- field4.value must be less than field1.value

您如何将这些新的验证要求集成到构建的表单中？

我确实不希望做的是建立一个

formControl.valueChanges.subscribe(value => { });

对于每个字段，然后在那里有很多 if/else。

然后我可以删除整个反应式表单模块，使用 2way-databinding 并在验证表达式为真时在 ui 中呈现错误字符串。

为什么CSSAngular5中的常规伪类不能正常工作？我知道您可以使用 Angular 事件处理程序（如(click)="function1()"或 ）来模仿他们的行为(mouseenter)="function2()"。

我们不能CSS在 Angular 中使用常规伪类的原因是什么？

要求

我需要将动态创建的组件放在具有行和列的容器中。行数和列数取决于用户输入。最初创建的每个组件都占用 1x1，即 1 行 1 列，然后可以根据用户要求调整大小。新创建的组件，先填充行，如果行被填充，则可以将其放置在最左列的下一行。所以故事一直持续到它填满容器，如图所示：

问题

问题是我无法按预期以正确的对齐方式插入这些组件。发生什么了？如果我添加第一个组件并将大小调整为 2x2，然后添加 1x1 的另一个组件，然后添加 1x1 的第 3 个组件。假设第三个组件插入在 1x1 的第二个组件下方，但它被插入到 2x2 的第一个组件下方：

我希望你现在更清楚我想要做什么。

如果我将新创建的组件包装在新列中，则可以解决此问题。简而言之，一列对应一个组件。但不知道如何使用每个新创建的组件创建列。