标签: angular5

我知道如何使用 ComponentFactoryResolver.resolveComponentFactory(AComponentType)

但该方法需要a Type，而在我的代码中，该类型的名称为a string。

在Angular API中，有没有一种方法可以解决string？如果没有，如何Type在TypeScript中将字符串转换为？

万一以上都不可行，我将求助于地图，但它并不是那么简单，因为我需要实例化的组件将来自远程获取的UMD角度组件库。

我必须找到一种在Angular5组件的HTML中访问SCSS变量（及其值）的方法，希望有人可以帮助我。

在我的variables.scss中，有一些变量，例如：

...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...

假设我的调色板由这些颜色组成。

我还创建了一些Angular组件，用于重用表格，图表等。
这些组件使用ng2-charts / Chart.js。其中之一是LineChartComponent，我将用它来阐明我的问题。

...
<app-line-chart 
    height="500" 
    [hexColors]="['#ccccccc', '#666666','#000000']" 
    [datasetLabels]="..." 
    [datasets]="..."
    [axisLabels]="..."></app-line-chart>
...

如您所见，我可以设置一些hexColors。这些将在LineChartComponent中转换为RGBA颜色。

但是现在。。。说我的调色板在变化。
然后，我必须在variables.scss中以及在所有这些颜色通过不同组件传递的所有位置中更改颜色。

到目前为止，我还没有找到访问组件中变量的方法。我考虑过要创建一个在其中定义了这些颜色的全局打字稿文件，因此我只需要编辑两个位置，就可以得到以下内容：

variables.scss

...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...

颜色变量

export const COLORS = Object.freeze({ 
    primary1: '#cccccc',
    primary2: '#666666',
    primary3: '#000000'
});

然后在需要颜色的组件中设置全局变量。

example.component.ts

import {COLORS} from '../globals/variables';
...
@Component({...})
export class SomeComponent {
    ...
    colors = COLORS;
    ...
}

然后将我组件的hexColors设置为此：

...
<app-line-chart 
    height="500" 
    [hexColors]="[colors.primary1, colors.primary2, colors.primary3]" …

在我的项目中有一个场景,考虑一下,我有一个testDynamic组件

@Component({
    templateUrl: "./test-dynamic.html", // Need to override this file
    styleUrls: ['./test-dynamic.css']
})
export class testDynamic {
    constructor() { }
}

这里需要检查override文件中是否存在override1.html文件,然后将此文件作为templateUrl加载,否则加载组件默认test-dynamic.html.不知道如何实现这一目标.

请参阅以下图片以便清楚理解

我想知道是否有可能以模糊的反应形式进行验证。目前，您可以进行设置，updateOn: "blur"但是输入字段的值不会在输入时更新。在我的情况下，我需要在每次击键时更新值，因为我会用它进行计算并将结果显示给用户。验证应仅在模糊时进行。

谢谢。

编辑：

我使用FormBuilder，一些内置的验证器和一些自定义的验证器。示例代码：

let formToMake = {
  purpose: [null, Validators.required],
  registrationDate: this.fb.group({
    day: [null, Validators.required],
    month: [null, Validators.required],
    year: [null, Validators.required]
  }),
  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};

如果我要使用模糊事件，则需要手动进行所有验证，但我认为这不是一个好方法。

我讨厌所有的角度元素都是0x0像素，因为它们具有诸如app-card，app-accordion之类的名称，浏览器无法将其识别为符合HTML5的元素，因此不会提供任何默认样式。

这意味着在Chrome中检查它时，我看不到容器尺寸，并且当DOM真的很深时，很难理解哪个元素包含了屏幕上的哪个区域，等等。

在我看来，所有角度元素默认情况下都应进行块显示，这是合乎逻辑的，因为对于大多数情况而言，这是有道理的。

例如，考虑这些要素

bbs-accordion-header //(width 0px, height 0px)

包含

bbs-accordion-header-regular //(width 1920px, height 153px)

因此，bbs-accordion-header没有任何尺寸，即使它的孩子确实有它们。

我通过手动向每个元素.scss文件添加一行来解决此问题

:host { display: block; }

但是每次手动添加它都是非常繁琐的。有谁知道更好的解决方案？

我单击关闭通知时收到此错误，它似乎是随机发生的。

zone.js：196未捕获的错误：ViewDestroyedError：尝试使用被破坏的视图：在checkAndUpdateView（core.js：13508）在Object.debugUpdateDirectives [作为updateDirectives]（core.js：14336）的viewDestroyedError（core.js：9540）的detectChanges ），位于Object.debugCheckAndUpdateView的callWithDebugContext（core.js：14740）[以checkRef.webpackJsonp ../ node_modules/@angular/core/esm5/core.js.ViewRef_.detectChanges（core的checkAndUpdateView]（core.js：14277） .js：11300），位于Angular2-notifications.umd.js：531，位于ZoneDelegate.webpackJsonp ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke（zone.js：392），位于Object.onInvoke（核心.js：4629）在ZoneDelegate.webpackJsonp ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke（zone.js：391）

此错误在我的应用程序中多次（appx 1667次）命中，因为它执行更改检测生命周期挂钩。

如果有人有想法解决此问题，请帮助我解决这个问题。

Angular2-通知

我想使用@HostListener 的捕获阶段。

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log("key pressed");
  }

上面的代码使用默认值（气泡相）。我想使用捕获阶段的情况之一，请帮助我，如何使用@HostListener的捕获阶段。

当我特别点击mat-paginator 最后一个按钮时，我需要听。有没有事件侦听器或方法可以做到这一点？

我尝试过：(page)="pageEvent = $event;emitPagination($event)"但它没有返回有关我点击位置的信息。

和同样的(click) = event($event)

HTML：

<mat-paginator #paginator 
    [length]="totalElements" 
    [pageSize]="5" 
    [showFirstLastButtons]="true" 
    (page)="pageEvent = $event;emitPagination($event)">
</mat-paginator>

我希望在单击最后一个按钮时调用特定方法。

我想使用 API 调用在元标记中设置动态信息。当我通过检查进行检查时，它将显示更新的数据，但当我在 Facebook 上共享链接时，它不会反映更新的数据。

索引.html

  <meta name="description" content="Create and share your biography">\n  <meta name="og:url" content="window.location.href"> \n  <meta name="og:title" content="TEACHERLIFE -SPANISH LESSONS">\n  <meta name="og:description" content="So I\xe2\x80\x99m in my classroo...">\n

在组件.ts中：

import { Meta, Title } from \'@angular/platform-browser\';\n constructor(private metaService: MetaService,\n    private meta: Meta,) {}\n  ngOnInit() {\nthis.meta.updateTag( {name: \'og:description\', content:"testdescription"});\n}\n

我试图在每行创建 6 个图块，每个图块由左上角的金额、右上角的 + 符号、慈善机构名称下方、最左边的日期下方等组成。但一切都在中间发生。如何自定义每个 mat-grid-tile 的样式。

HTML Example

mat-grid-list cols="6" rowHeight="4:3" [gutterSize]="'10px'">
  <mat-grid-tile *ngFor="let item of items; let i=index">
    <div class="div-table">
      <div class="div-row">
        <div class="div-cell" style="font-weight: bold; font-size: medium;">{{amount | currency}}</div>  
      </div>
      <div class="div-row">
        <div>{{item.Name}}</div>
      </div>
    </div>
  </mat-grid-tile>

CSS Example


mat-grid-tile {
  background: lightblue;
}

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
}
.div-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-cell {
  float: left; 
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}