标签: angular5

我在我的 Angular 5 项目中使用延迟加载，我有一个共享模块，其中导入了所有材料组件，我在其他模块中使用此共享模块作为材料模块。

所有组件在开发模式下都可以正常工作，但是当我为生产进行构建时，它显示的错误'mat-select'不是已知元素，而没有显示任何行号。

我已经在使用角材料的组件和我的app.component.ts文件中导入了共享模块。我到处搜索，但没有运气。

我想为 angular 5 应用程序安装npm bootstrap-select所以我使用 npm 安装了它

npm install bootstrap-select

然后我安装了所需的依赖项：

npm install jquery
npm install popper.js --save

角度cli.json：

 "apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ],
    }
  ],

我的 package.json 是（我从列表中删除了一些包）：

"dependencies": { 
    (...)
    "@ng-bootstrap/ng-bootstrap": "^1.1.0",
    "bootstrap": "^4.1.1",
    "bootstrap-select": "^1.13.2",
    "jquery": "^3.3.1",
    "ng-multiselect-dropdown": "^0.2.1",
    "popper.js": "^1.14.4",
}

在 html 文件中，我添加了代码：

<ng-template #modalWindow let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Options</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">     
    <select id="myspID" #selectPickerRef class="selectpicker …

如何根据另一个字段的值有条件地验证一个字段？这是我尝试过的，但似乎不起作用

this.PDform = _formbuilder.group({
    [...]
    'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ]
    [...]
})

我想输出一个表单，其中一个字段是一个数组，对于数组的每个元素，我需要输出我的输入。

成分：

ngOnInit() {
  const fb = this.fb;
  this.editForm = this.fb.group({
    country: fb.control(null),
    identifiers: this.fb.array([
       this.fb.group({
         codeIdentifier: fb.control(null),
         numIdentifier: fb.control(null),
       })
    ]),
 });
 this.organizationService.getOneById(this.id).subscribe((organization: Organization) => {
    let ids: any[] = [];
    organization.identifiers.forEach(item => {
       let id: any = { "codeIdentifier": "", "numIdentifier": "" };
       id.codeIdentifier = item.typeIdentifier.code;
       id.numIdentifier = item.numIdentifier;
       ids.push(id);
    });
     this.editForm.setControl('identifiers', this.fb.array(ids || []));
 })
}

HTML：

<div [formGroup]="editForm">
  <ng-container formArrayName="identifiers">
    <ng-container *ngFor="let identifier of identifiers.controls; let i=index" [formGroupName]="i">
      <input type="text" formControlName="codeIdentifier">
      <input type="text" formControlName="numIdentifier">
    </ng-container>
  </ng-container> …

我在我的 Web 应用程序中使用 Angular 5，并希望将 style.scss 文件预加载到项目中。该项目也有 angular-cli.json 文件。

呈现的 index.html 文件包含这样的标签：-

<link href="styles.bundle.css" rel="stylesheet">

angular-cli.json 文件如下所示：-

 "styles": [
        "styles.scss"
      ],

我想尝试添加rel="preload"选项以加快页面加载速度并缩小 style.scss 文件。

请建议如何进行这两项更改。

我在表中有一些数据绑定，单击任何特定的我想将当前单击的对象显示更多相关数据到另一个组件（子组件）

例如我从此链接获取的数据： http: //jsonplaceholder.typicode.com/users

HTML 代码：

<table>
  <thead>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
    <th>
      street
    </th>
    <th>
      suite
    </th>
    <th>
      zipcode
    </th>
    <th>
      phone
    </th>
    <th>
      website
    </th>
    </thead>
  <tbody>
    <tr *ngFor="let data of httpdata"> 
      <td>{{data.id}}
      </td> 
      <td>{{data.name}}
      </td> 
      <td>{{data.username}}
      </td> 
      <td>{{data.email}}
      </td> 
      <td>{{data.address.street}}
      </td> 
      <td>{{data.address.city}}
      </td> 
      <td>{{data.address.suite}}
      </td> 
      <td>{{data.address.zipcode}}
      </td> 
      <td>{{data.phone}}
      </td> 
      <td>{{data.website}}
      </td> 
      <td>
        <a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 
      </td> 
    </tr>
  </tbody>
</table>

如果您看到表中有一个“转到”按钮，当我单击任何特定数据时，它应该向我显示有关当前单击的完整信息，但在我的情况下，当我单击“转到”以获取特定数据时，我想将数据绑定到另一个组件中所有 td 数据都应显示在新组件（子组件）中。

简单我想跟踪子组件中选定数据的单击事件。并且该表在父组件中呈现。

附件是我的数据表。

如何配置 Angular 组件不触发整个应用程序的更改检测，而只触发组件本身及其子组件？

工作示例：https : //stackblitz.com/edit/angular-irc-starter-4txpbu?file=app%2Ftimer%2Ftimer.component.ts

有一个计数器每秒增加一个值。它是 TimerComponent 并且它按预期工作 - 每秒增加和更新值。

@Component({
  selector: 'app-timer',
  template: `{{value}}`
})
export class TimerComponent implements OnInit {
  value: number = 0;
  ngOnInit() {
    setInterval(() => this.value++, 1000);
  }
}

但是，请查看父组件 AppComponent。

<h3>Internal timer:</h3>
<p>Should not perform change detection for the whole app</p>
<app-timer></app-timer>

<h3>External binding</h3>
<p>Should not be updated after timer changes</p>
<p>{{someBindingProperty}}</p>

someBindingProperty是一个吸气剂：

get someBindingProperty() {
  this.bindingTimer++;
  return this.bindingTimer;
}

问题：当 TimerComponent 增加值时，会触发整个应用程序的更改检测。是否可以仅在组件和子组件内触发更改检测？

注意：如果我添加到 TimerComponent：

changeDetection: ChangeDetectionStrategy.OnPush

然后在此组件中不会检测到更改，但仍会为整个应用程序触发更改检测。所以这不是一个解决方案。

我正在按照这篇教程文章来测试角度投影的工作原理。在本文中，我遇到了select属性ng-content，我们可以传递class name或attribute选择并定位特定的属性ng-content。

例如：

@Component({
  selector: 'greet',
  template: `
    <ng-content select=".headerText"></ng-content>
    <ng-content select="btnp"></ng-content>
  `


<greet>
  <h1 class="headerText">Hello</h1>
</greet>
<greet>
  <button btnp>Click Here</button>
</greet>

上面的例子运行良好。但是，现在我想要的是动态传递一个类名来选择，例如：

<ng-content select=".headerText{{some_id}}"></ng-content>

但是，当我尝试这样做时，我收到错误：

无法绑定到“select”，因为它不是“ng-content”的已知属性。

我怎样才能实现这个目标？

我想实现只有一行选择的表。现在我有多项选择。

我尝试了双门轿跑车的方法来做到这一点，但我坚持使用这种方法。

图例：

组件.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { UsersReadRepository } from '../../../../core/services';
import { MatTableDataSource } from '@angular/material';
import { User } from 'domain-models';
import { Observable, Subscription } from 'rxjs';
import { Subscribable } from 'rxjs/Observable';
import { SelectionModel } from '@angular/cdk/collections';

@Component({
    selector: 'choose-supervisior',
    templateUrl: './chooseSupervisior.component.html',
    styleUrls: ['./chooseSupervisior.component.scss']
})

export class ChooseSupervisiorComponent implements OnInit, OnDestroy {
    selectedRow: User;
    isLoading = true;
    dataSource: MatTableDataSource<User> = new MatTableDataSource(); …

我正在使用<p-table>它必须<p-tableHeaderCheckbox></p-tableHeaderCheckbox>选中和取消选中该复选框。一切工作正常，但当我移至表中的下一页时，所有内容均未选中，但 selectAll 选项仍处于选中状态。如何取消选中标题复选框。

<p-table #dtGrid [columns]="staticColumns" [value]="serviceIdData" 
    [styleClass]="'table'" scrollHeight="{{scrollHeight}}" [rows]="10" 
    [paginator]="true" (onRowSelect)="onRowSelect($event)" [pageLinks]="3" 
    (onRowUnselect)="onRowUnselect($event)" [rowsPerPageOptions]="[10,25,50,100]" 
    styleClass="table-light" (onHeaderCheckboxToggle)="handleHeaderCheckboxToggle($event)"
    [scrollable]="true"  [lazy]="true"  [(selection)]="selectedRecords"
     (onLazyLoad)="onLazyLoad($event);" [totalRecords]="totalRecords" scrollHeight="450px"  [responsive]="true">
        <ng-template pTemplate="colgroup" let-columns>
              <colgroup>
                  <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
              </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
              <th role="columnheader" style="width:20px;">
                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
              </th>
                <th *ngFor="let col of columns" [pSortableColumn]="col.fieldName" (click)="placeSortIcon()">
                   <div>
                        <span pTooltip={{col.tooltip}} tooltipPosition="top" [innerHtml]="col.label" [ngClass]="'ui-column-title'"></span>
                        <span *ngIf="dtGrid.sortField === col.fieldName" class="fa" [ngClass]="{'fa-sort-desc': dtGrid.sortOrder === -1, 'fa-sort-asc': dtGrid.sortOrder === 1}"></span>
                  </div>
              </th>
            </tr>
          </ng-template> …