标签: angular2-template

当我点击撰写按钮以打开电子邮件模板时（例如；当点击撰写邮件时在 gmail 中给出），在单页中使用多个模板的辅助路由。

问题是：如何在单击十字按钮时删除或停用此辅助路由。

应用程序

   @RouteConfig([
    {
     path: '/',
     name: 'OpportunityList',
     component: OpportunityComponent,
     useAsDefault: true
    },
    {
     path: '/detail',
     name: 'Detail',
     component: DetailComponent
    },
    {
     aux: '/mailer', 
     name: 'Mailer', 
     component: MailerComponent
     }
   ])

应用程序.html

    <a [routerLink]="['/', ['Mailer'] ]" >Compose</a>

邮件程序组件.ts

   export class MailComponent implements OnInit{
      closeEmail(){
          console.log("please suggest me to Deactivate this template")
       }
    }

邮件程序.component.html

   <div class="header with-bord">
     <h3 class="title">New Message <a (click)="closeEmail()" class="close"><i class="fa fa-times"></i></a></h3>
    </div>

我已经使用 React 几个月了，React 不是简单地完全重新渲染一个组件，而是找到差异并进行这些更改。Angular 2 会做这样的事情吗？

而且，每当检测到状态变化时，Angular 2 会重新渲染来自根节点的所有组件，还是只重新渲染那些检测到更改的特定组件及其子树？

我在我的 Angular 2 应用程序中使用 PrimeNG 作为 UI 库。在某个组件中，我需要有一个滑块组件。因此，我使用了相应的 PrimeNG 滑块组件，如下所示：

<p-slider [(ngModel)]="this.adjustedCalculation.predictionYear"></p-slider>

这完美地工作。

但是，我注意到这个组件在带有触摸屏的设备上坏了。所以我需要找到一个替代品。

我遇到了此处描述的“范围”类型的标准 HTML 5 输入，并添加了如下标记：

<input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="true" data-popup-enabled="true" />

如何将此输入元素与我的 Angular 2 组件变量连接this.adjustedCalculation.predictionYear？

我希望用户选择的值在此变量中表示。

更新：

我[(ngModel)]按照建议添加并且它有效。下一点是我想控制这个输入元素的最小值和最大值。考虑之前版本的 PrimeNG 滑块：

<p-slider [(ngModel)]="this.adjustedCalculation.predictionYear" [min]="this.displayedCalculation.predictionYear - 10" [max]="this.displayedCalculation.predictionYear + 10"></p-slider>

我该如何传递“predictionYear - 10”这个表达式？+ 10 到那个输入元素？让我知道我是否应该为此提出一个新问题。

谢谢！

我想了解输入文本框中下面提到的模板引用变量表示法之间的区别.

<input type="text" name='name' #name [(ngModel)]='model'>
<input type="text" name='name' ref-name [(ngModel)]='model'>

使用#name和ref- name有什么区别.
使用引用名称变量的范围是否会更改？
有人可以建议最佳做法和理由吗？

我需要将 html 字符串传递给 angular 4 中的组件，但我找不到将传递的字符串标记为安全的方法。

我正在父组件中创建传递的 html，它不是我从用户那里获取或从服务器检索的东西，它也是动态的（根据情况/警报类型创建）

我的代码如下所示：

<app-alert
  message = "Please complete your <span class=u>Profile</span>"
  alertType = "alert-info"
  icon = "glyphicon glyphicon-info-sign"
  closeBtn = "true">
</app-alert>

我搜索了很多，但找不到合适的东西，我能找到的最接近的是这个问题，但它只处理“普通”字符串，而不是包含 html 的字符串

如何将 html 字符串传递给我的子组件？

我的 Angular2 应用程序中有一个 Bootstrap 模式弹出窗口。我希望它是可拖动的。如果有人可以帮助我解决此问题，那将非常有帮助。

<div class="modal modal-sm fade fade in" [class]="modalWorkPhone" id="myModal" role="dialog">
   <div class="modal-dialog"> 
   <!-- Modal content-->
     <div class="modal-content">
       <div class="panel-heading" style="background-color:#2e90bd">
       </div>
     </div>
   </div>
</div>

我在ngx-datatable 的每个标题单元格中都有自定义下拉组件。但是当我点击下拉菜单时，它会进入ngx-datatable主体。我该如何解决这个问题，请帮助我。

我正在使用 angular 4.0 和 typescript 2.4。

截屏：

这是我的代码：

 <div>
      <ngx-datatable style="height:450px;"
        class='material'
        [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}'
        [columnMode]="'force'"
        [headerHeight]="height"
        [rowHeight]="getRowHeight"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [loadingIndicator]="loadingIndicator"
        [rowClass]="getRowClass"
        (page)="onPage($event)">
      <div>
        <ngx-datatable-column 
          [width]="50"
          [frozenLeft]="true">
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <input type="checkbox" 
              (ngModelChange)="checkButtonState($event, row)"
              [ngModel]="row.status"
              >
          </ng-template>
        </ngx-datatable-column>

        <ul>
          <li *ngFor="let col of tableKeys; let i=index; let last = last" >
        <ngx-datatable-column name={{col}} width="230" [resizeable]="true">
          <ng-template let-column="column" ngx-datatable-header-template >
              <div class="draggable" style="height:30px;width:160px;background:transparent;z-index:1000;position:relative;cursor:pointer;"></div>

                                    <ng2-multiselect 
                                      [options]="dropdowns[col]"
                                      [loading]="isLoading" …

我正在尝试将 Popper.js 设置为使用 angular 5，而无需引导程序或 jquery。我尝试按照此https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration 进行操作，但这并不是角度应用程序的 A 到 B 点描述。

我通过 npm 安装了 Popper.js

npm install popper.js --save

然后我选择将 esm 模块捆绑到我的 angular-cli 脚本中

"scripts": [
                   (...)
        "../node_modules/popper.js/dist/esm/popper.js"
      ],

由于 esm/popper.js 导出 Popper 变量如下。

var Popper = function () {

我想我会像这样在我的角度模板中声明 popper 变量

declare var Popper;

唉，我运气不好。

有人对如何正确实现这一点有想法吗？

在 Angular 2 中，我的styles.scss文件中有一个 CSS 类：

.FirstClass {
}

我正在尝试在组件的 .SCSS 文件（例如：）中扩展此类，例如MyComponent.scss：

.SecondClass {
  @extend .FirstClass;
}

我收到一个错误，说.FirstClass找不到。我是否正确地假设styles.scss可以全局引用类和样式？请帮助我。

我有一个简单的问题：在一个简单的 Angular 组件中，我们是否可以动态更改通过 http 调用检索的模板，例如：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


/**
 * Les liens link permettent de passer d'une page à l'autre.
 */
@Component({
  selector: 'mycomponent',
  template: '<strong>Loading…</strong>'
})
export class MyComponent implements OnInit {

  //#region PROPRIÉTÉS
    private moHttp : HttpClient
  //#endregion

  //#region CONSTRUCTEUR
  constructor(poHttp: HttpClient){
    this.moHttp = poHttp;
  }

  public ngOnInit(): void {
    this.moHttp.get('https://myapiUrl').subscribe(poData:any => {

      // here poData is HTML string, and I want to set it instead of the …