小编cob*_*nks的帖子

如何在@Routes路径元数据集合中设置默认路由？如果使用@ angular/router-deprecated中的angular2路由器,则在@routeConfig对象中定义路由,该对象是路由对象的集合,但这些路由对象具有更多属性.例如,它们具有'name'和'useAsDefualt'属性,而从@ angular/router定义的路由则没有.我想用新路由器编写我的新应用程序,但是如何使用新路由器并设置默认路由？

这是我的主要app组件,它定义了我的路线:

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigManagerComponent } from './configManager/configManager.component';
import { ApplicationMgmtComponent } from './applicationMgmt/applicationMgmt.component';
import { MergeComponent } from './merge/merge.component';

import { ROUTER_DIRECTIVES, Routes } from '@angular/router';


@Component({
    selector: 'app-container',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

        { path: '/Dashboard', component: DashboardComponent },
        { path: '/ConfigManager', component: ConfigManagerComponent },
        { path: '/Merge', component: MergeComponent },
        { path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])

export class AppComponent { } …

我们正在使用bootstrap,有时它会自动将类添加到DOM元素中.附加到这些元素并检测何时将particalr css类添加到组件模板子元素的最佳方法是什么？

说我有这个组件:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { HeaderService } from './header.service';

@Component({
    selector: 'header-comp',
    templateUrl: './Home/RenderLayoutHeader'
})

export class HeaderLayoutComponent {
    constructor(private _headerService: HeaderService) { }
}

这是我的视图模板的一部分:

<header-comp>      
<li class="nav-header-icon-list-item">
                        <div class="overlay-dropdown dropdown" id="patientDDL">
                            <button  class="btn btn-default dropdown-toggle session-menu-container" type="button" id="session-dropdown-menu" data-toggle="dropdown" data-backdrop="true" data-dismiss="modal"  aria-haspopup="true" aria-expanded="false">
                                <img data-initials="ER" src="https://lorempixel.com/40/40/abstract/" class="img-circle session-user-profile-img">

当bootstrap将"open"类添加到#patientDDL元素并在我的组件中执行函数时,如何在组件中检测到？

谢谢!

编辑:我根据Gunter的解决方案修改了我的组件,但是当我没有在标准之前进行空检查时,我得到一个空引用)

import { Component, ViewChild, ElementRef, DoCheck } from '@angular/core';
import { HeaderService } from './header.service';

@Component({
    selector: 'header-comp',
    templateUrl: …

我正在尝试使用Angular 2设置一个Bootstrap标签条.我有一个标签渲染,ngFor但是当我尝试放置表达式的#前面时,我遇到了模板错误href.所以这个模板编译但不是我想要的:

<ul class="nav nav-tabs" role="tablist">
  <li *ngFor="let aType of resourceTypes; let i = index"
      [ngClass]="{'active': i == 0}"
      role="presentation">
    <a [attr.href]="aType.Name"
       [attr.aria-controls]="aType.Name"
       role="tab"
       data-toggle="tab">
      {{aType.Name}}
    </a>
  </li>
</ul>

我想做的[attr.href]="#aType.Name" 就是爆炸.#在属性指令中预先添加表达式前面的正确语法是什么？

我正在将我们的一个应用程序从rc4更新到angular2.0.0,我在运行时遇到模板解析错误.这是我的视图模板:

<div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
    <a [routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
        <div class="tile-icon">
            <span [className]="widget.IconCssClass"></span>
            <span *ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>
        </div>
        <h4>{{widget.Text}}</h4>
    </a>
</div>

错误发生在routerlink上.这是错误:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

    <div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
        <a [ERROR ->][routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
            <di"): LdrComponent@4:19
Can't bind to 'ngIf' since it isn't a known property of 'span'. ("tile-icon">
                <span [className]="widget.IconCssClass"></span>
                <span [ERROR ->]*ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>
            </div>
     "): LdrComponent@7:22

routerLink对我来说似乎没有变形......我做错了什么？

我有一个下面定义的全局js变量(@Url是一个ASP.Net MVC html帮助器,它将转换为字符串值):

<script>
  var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)';
  System.import('app').catch(function(err){ console.error(err); });
</script>

如何在angular2组件中访问rootVar？我曾经在角度1.5中使用窗口服务,在angular2中有类似的方法吗？

具体来说,我想使用该rootVar变量来帮助生成此组件中的templateUrl:

import { Component, Inject} from '@angular/core';

@Component({
    selector: 'home-comp',
    templateUrl: '../Home/Root'
})

export class HomeComponent {   
    constructor( ) {  }
}

我转换的Angular2使用App CommonJS的对JIT和手动配置AOT(二的index.html文件,二是main.ts文件等)到angular4 CLI模板旧的方式(ng new appName).

2/4之间的cli似乎发生了很大的变化.看了一些youtube视频,用ng cli创建了一个新的应用程序,我看到了这两个ng build和ng serve支持--prod和--aot标志,但生成的webpacks在使用两个不同的标志时大小不同.

有什么区别

ng build --prod

和

ng build --aot

然后为服务:

ng serve --prod 

和

ng serve --aot

似乎prod捆绑比捆绑小,但为什么？

关于如何在我的库angular6项目中引用外部npm包,我有点困惑.我们有一个内部scss库,我想用它来设置我库中可重用组件的样式.我如何进口呢？

用于lib项目的package.json:

{
  "name": "ikr-lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "document-register-element": "1.8.1"
  },
  "dependencies": {
    "element.ui": "^1.0.1"
  }
}

当我构建库项目时,我得到了这个:

Distributing npm packages with 'dependencies' is not recommended. Please consider adding element.ui to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency element.ui must be explicitly whitelisted.

有没有办法用角形材料制作可折叠的卡片？看起来像是相当受欢迎的东西,但我一直在寻找合适的角度材料组件/设置:Angular Material - Card并没有发现任何东西.

谢谢!

我们正在使用 Angular、.Net WebApi 和 Azure 来构建多个应用程序。我们一直在做的是通过隐式 oAuth2/OIDC 授权流通过 Azure AD 保护应用程序。

一切运行良好，但到目前为止我们已经有了一个简单的架构。IE '前端 App1' -> 'WebApi App1'

当我们向 AAD 请求令牌时，我们在令牌请求中发送资源（“WebApi App1”的应用程序 ID）。似乎这是令牌请求中的必需属性。这是如何扩展的？

假设我们有一种情况，“前端 App1”需要与“WebApi App1”和“WebApi App2”对话。我们是否需要发出多个令牌请求？人们在 Azure 中的这些情况下会做什么？将不记名令牌紧密耦合到一个资源似乎很奇怪。

似乎另一种方法是我可以将两个 api 应用程序配置为验证相同 Azure 租户和应用程序 ID 的令牌。这样令牌对任何一个应用程序都有好处，但这也不是很灵活，因为这意味着任何一个应用程序的所有令牌都对另一个应用程序有好处......

我正在构建一个角度元素并将一些输入参数传递给它。我可以很好地传递一些字符串输入参数（ikrId 和环境工作得很好），但是很难通过角度元素将布尔值传递给 showTitle 输入属性（将 showTitle 属性从父角度组件传递给组件工作正常）。

这是组件片段：

export class MyComponent implements OnInit, OnDestroy {

  @Input() ikrId: string;
  @Input('environment') environment: IkrEnvironment = 'PROD';
  @Input('showTitle') showTitle = true;

这是我在普通旧 html 中使用它的方式：

<my-element environment="DEV" ikr-id="889fb69f-71a5-4881-8528-0b43a07599f0" show-title="false"></my-element>

但是节目标题没有传递到我的组件中，它总是正确的。

我在这里缺少什么？

谢谢！