我正在 angular8 中构建一个应用程序。我在 angular5/6/7 上工作，对于那些应用程序，我取消了对 polyfills.ts 中存在的导入的注释。对于 angular 8，它只有 3 个导入，即 classlist.js、web-animation-js 和 zone.js/dist/zone。我的应用程序在 IE 中运行良好。但是我开始使用包含功能来查看项目是否存在。它在 chrome 中运行良好。在 IE 中，它抛出 Object 不支持属性或方法 'includes' 错误。

我router-outlet在网络应用中使用多个命名为angular 8的名称。所有routerLink似乎都可以使用，因为它更改了URL，但是第二个router-outlet中的组件已导入，但未初始化也未呈现。

我在这里提供了Stackblitz：https ://stackblitz.com/edit/ng-multiple-router-outlet?file = src/app/app.component.ts

如您所见，当您单击侧边栏时，在照片下方，您可以通过单击Google或Facebook进入第二级导航，但不会呈现任何内容。

在模块中，可以很好地导出其他模块和RouterModule中使用的组件，以使其易于访问，我看不出我做错了什么。

我试图同时使用forRoot和forChild方法来声明路由，放置了一些日志，但是没有足够的线索。

谢谢你的帮助 ！

这个我花了一段时间才弄明白，所以我希望通过在 SO 的问答方式中分享解决方案来节省某人的时间。它是这样的：

目标

我有一个 Angular8 Web 应用程序，我使用RouterModule在组件之间导航。

以下是我的路线的定义方式：

const routes: Routes = [
    { path: 'moo', component: AppMooComponent, data: { title: 'Moo Section', desc: 'Moo is the first example component.' } },
    { path: 'boo', component: AppBooComponent, data: { title: 'Boo Section', desc: 'Boo is the second example component.' } },
    { path: 'foo', component: AppFooComponent, data: { title: 'Foo Section', desc: 'Foo is the third example component.' } },
    { path: '', redirectTo: 'moo', pathMatch: 'full' …

使用此资源，我想在多个嵌套级别上实现 formControlName。

Angular 2 - 组件内的 formControlName

假设实际的 formGroup 比子 formControlName 组件高 3 个组件级别，

如果父组件紧挨着子组件，则 ControlValueAccessor 起作用。然而，以上（祖父）形式的多个级别不起作用。

是否有服务或多个输入/输出的替代方案？或者这些是唯一的方法？

A--> Component with formGroup 
   B---> Component container
      C---> Component container
        D ---> Component with FormControlName (should pass to Component A)

组件A会从类似的不同子组件中收集多个表单控件名称，

输入文本.ts

export class InputTextComponent implements  AfterViewInit, ControlValueAccessor  {
  @Input() disabled: boolean;
  @Output() saveValue = new EventEmitter();

  value: string;
  onChange: () => void;
  onTouched: () => void;

  writeValue(value: any) {
    this.value = value ? value : "";
  }

  registerOnChange(fn: any) {this.onChange = …

LazyLoading chunkName 未显示

webpack.config.js

const webpack = require('webpack');
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
    entry: {
        clientApp: "./App/Modules/main",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].bundle.js",
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/',
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [ 
            'angular-router-loader'
        ]
    },

    plugins: [
    ]
}

app.routing.ts

{
                path: 'about',     
                loadChildren: () => import('../Features/about/about.module').then(m => m.AboutModule)   
            }

它不显示块的模块名称。我在这里做错了什么？

我正在为我的项目使用 Angular 8，使用节点版本 10.15.3（曾尝试使用其他版本，包括最新的 12.31.1）。这在 MAC 上工作正常，但在 Windows 上运行时，它在浏览器上停止并出现错误

NullInjectorError: "StaticInjectorError(AppModule)[MatCommonModule -> HighContrastModeDetector]: 
  StaticInjectorError(Platform: core)[MatCommonModule -> HighContrastModeDetector]: 
    NullInjectorError: No provider for HighContrastModeDetector!"

这是否与我的硬件有关（它是如何相关的）？

我正在创建一个下拉列表来过滤数据，所以我创建了一个下拉列表

<form  #filter="ngForm" (ngSubmit)="filterta(filter)" style="display: flex;">
       <select  ngModel #month="ngModel" name="month" required  >
                <option [ngValue]="null" [disabled]="true" >All</option>
                <option value="1">January</option>
       </select>
</form>

当我从ngModel #month="ngModel" 选择标签中删除这些属性时，它会显示占位符选项 All，当我添加这些属性时，它会在占位符中显示空白。

我正在使用 Angular8 和反应式形式。我的 ngOnInit 是：

ngOnInit(): void {
  this.makeForm = this.fb.group(
    year: ['', Validators.required],
    amount: ['', Validators.required],
    desc: ['', Validators.required],
    details: new FormArray([
      this.det(),
    ]
  );
}

det() {
  return new FormGroup({
    for: new FormControl(''),
    remarks: new FormControl('')
  });
}

我有来自后端的数据来修补数组：

 {
  "amount": 9000,
  "year": 1996,
  "id": 1,
  "desc": "P1",
  "details": [
    {
      "id": 1,
      "remarks": "ok",
      "for": "1"
    },
    {
      "id": 24,
      "remarks": "OK",
      "for": "1"
    },
    {
      "id": 25,
      "remarks": "OK",
      "for": "1"
    }
  ]
 }

我通常用这种方法修补值：

getppredit() …

我的 Angular 12 应用程序中有一些通用组件，我计划将其创建为 Angular 库，以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 Angular（例如 Angular 8 / Angular 10）上运行，它们也将使用这个通用库。

我已经在 Angular 12 中创建了库，它在 Angular 12 应用程序中运行良好。但是，它在使用 Angular 8 和 Angular 10 的其他应用程序中不起作用。

出现如下错误：

fesm2015/common-lib.js 12:145-163 "export '\xc9\xb5\xc9\xb5FactoryTarget' (imported as 'i0') was not found in '@angular/core'\n

所以，主要的困惑是我是否需要为 v8、v8 和 v12 应用程序创建 3 个不同的角度库。或者有什么方法可以创建一个可供所有 3 个角度应用程序使用的库（版本 8/10/12）。

请建议正确的继续方式。

父组件

  <form [formGroup]="User">
    
    <app-radioButton [group]="user"></app-radiobuton>
    
    </form>

在无线电组件 html 中

<mat-radio-button  [formControlName]="name" > <mat-radio-button>

无线电组件的 .ts 中

export class RadioComponent{
@Input() group: FormGroup;
}

报错如上。不知道我做错了什么。