小编yur*_*zui的帖子

我有一个由多个组件组成的 angular2 应用程序，它在其模板中嵌入了（参数）不同的小 svg 文件。这个选择的原因是我需要与 svg 进行交互并操作 svg 文件的内部 DOM。另外我想引用一个 svg 文件，而不是在模板中的多个位置使用内联 svg，它在组件模板中更干净。

我的问题是这些 svg 文件没有被缓存在浏览器中，并且在加载包含多个组件（呈现这些 svg 文件）的页面时，我注意到在页面完成加载之前有一些小延迟。这远非最佳，如果我不能解决这个问题，我会考虑回到内联 svg。

我的目标是能够让组件模板指向一个 svg 文件，并且当这个组件第一次加载时，它不会从服务器发送，而是从浏览器缓存中检索。希望这将解决我遇到的延迟加载问题。我已经尝试在我的应用程序的根目录中定义一个 cache.manifest 文件（它定义了要缓存的不同 svgs），但是当组件加载时，服务器仍然在每次组件时发送 svgs（和 param.js）加载。！

这就是我构造一个组件模板的方式，它由 svg 符号组成，当我单击 svg 符号时，我会打开一个应包含相同符号的弹出窗口：

<div>
    <!--Header-->
    <div>{{ name }}</div>

    <!--Actual svg symbol Object-param style-->
    <div class="symbolIcon"(mouseup)="onMouseUp()" (mousedown)="onMouseDown()" >
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>
    </div>
</div>

<!--Placeholder for Popup-->
<modal-popup *ngIf="loadPopup" (command)="popupCmd($event);">
    <!--Symbol to be placed on Popup (same as in template above)-->
    <div class="modal-startstop-symbol"> …

在Angular 2中，我有一个带有模板的组件。

在组件TypeScript代码中，我创建了一个Reactive Extensions Observable（items$），并在ngFor带有异步管道的模板的-directive中使用它。

这样，我不必担心自己订阅和取消订阅。

<div *ngFor="let item of items$ | async"></div>
...
</div>

现在，从组件代码中，我想访问项目列表，但不订阅它。模板是否有办法退还或引用项目列表？

这是标签代码:

import {Directive} from '@angular/core';

@Directive({
  selector: '[ngbButtonLabel]',
  host:
      {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'}
})
export class NgbButtonLabel {
  active: boolean;
  disabled: boolean;
  focused: boolean;
}

这是单选按钮代码:

import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

import {NgbButtonLabel} from './label';

const NGB_RADIO_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NgbRadioGroup),
  multi: true
};

let nextId = 0;

/**
 * Easily create Bootstrap-style radio buttons. A value of a selected button is bound …

我有一个数组作为集合，我想将其加载到下拉列表中，并希望在某种情况下进行默认选择，但我不知道该如何实现。

app.component.ts

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

@Component({
  selector: 'app-commingsoon',
  templateUrl: './commingsoon.component.html',
  styleUrls: ['./commingsoon.component.css']
})
export class CommingsoonComponent implements OnInit {
  public collection = [];
  constructor() {
    for(let i = 1; i<=10 ; i++) {
      this.collection.push(`Angular: ${i}`);
    }
   }

  ngOnInit() {
  }

}

app.component.html

<select name="" id="" style="position:relative; left: 100px">
    <option *ngFor="let i of collection;" value="{{i}}" [selected]="i == Angular: 2">{{ i }}</option>
</select>

我希望下拉列表应为i == Angular：2时的选定值

我的代码的很多部分都使用了@ event.srcElement,例如......

<label><input (change)="setCompare($event.srcElement.checked,item.id, item.name, item.capacity, item.photoId,item.occupiers[0])" type="checkbox">Compare availability</label>

在Chrome上工作正常,但使用FF它会抛出:

错误:

EXCEPTION:app/templates/results.html中的错误:35:22原始异常:TypeError:event.srcElement未定义ORIGINAL STACKTRACE:ResultsComponent.prototype.onScroll @ http:// localhost:3002/app/components/results/results. component.js:124:9 anonymous/_View_ResultsComponent0.prototype._handle_scroll_13_0@ResultsComponent.template.js:268:15 DebugAppView.prototype.eventHandler/<@http :// localhost:3002/node_modules/@ angular/core/src/linker /view.js:316:24 decoratePreventDefault/<@ http:// localhost:3002/node_modules/@angular/platform-b​​rowser/src/dom/dom_renderer.js:278:36 DomEventsPlugin.prototype.addEventListener/outsideHandler/<@ http:// localhost:3002/node_modules/@angular/platform-b​​rowser/src/dom/events/dom_events.js:20:93 Zonehttp:// localhost:3002/node_modules/zone.js/dist/zone.js: 323:20 NgZoneImpl/this.inner <.onInvoke @ http:// localhost:3002/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:32 Zonehttp:// localhost:3002/node_modules/zone. js/dist/zone.js:322:20 Zonehttp:// localhost :3002/node_modules/zone.js/dist/zone.js:230:29 NgZoneImpl.prototype.runInnerGuarded @ http:// localhost:3002/node_modules/@angular/core/src/zone/ng_zone_impl.js:78:67 NgZone.prototype.runGuarded @ http:// localhost:3002/node_modules/@angular/core/src/zone/ng_zone.js:228:58 DomEventsPlugin.prototype.addEventListener/outsideHandler @ http:// localhost:3002/node_modules/@ angular/platform-b​​rowser/src/dom/events/dom_events.js:20:56 Zonehttp:// localhost:3002/node_modules/zone.js/dist/zone.js:356:24 Zonehttp:// localhost:3002 /node_modules/zone.js/dist/zone.js:256:29 ZoneTask/this.invoke @ http:// localhost:3002/node_modules/zone.js/dist/zone.js:423:29

有关如何解决它的任何建议 - 或者:用更多浏览器不可知的东西替换$ event.srcElemento？

我需要添加路由到MdDialog组件,我不知道解决这个问题的最佳方法是什么.

目前,在foo page(www.app.com/foo/1)上,用户可以单击一个按钮,它将打开一个MdDialog组件,bar.

我想要做的是,打开MdDialog后,它会附加/bar/:id到组件上.所以,例如它会是这样的www.app.com/foo/1/bar/1.目标是让用户拥有可以导致foo的可共享链接,然后打开MdDialog.

到目前为止,这就是我的应用程序的结构.

app/
  app.component.html <- <router-outlet> is found here
  app.component.ts
  app.module.ts

  foo/
    foo-routing.module.ts
    foo.component.html
    foo.component.ts
    foo.module.ts

    bar/
      bar.component.html <- This bar component file for the MdDialog
      bar.component.ts

  baz/ <- Another section of the website with it's own routing
    baz-routing.module.ts
    baz.component.html
    baz.component.ts
    baz.module.ts
    ...

目前在我foo-routing.module.ts,我有这个:

const routes: Routes = [
  {
    path: 'foo/:fooId',
    component: FooComponent,
    children: [
      {
        path: 'bar/:barId',
        component: BarDialogComponent
      }
    ]
  }
];

但是,这不起作用.所有这一切都是打开模块,重新路由到/,并且不允许我点击其他链接.

有人有什么建议或想法吗？谢谢!

我有2个选项卡,在选项卡内容中有一个我开发的组件.当我从一个选项卡移动到另一个选项卡并返回到我开发的组件所在的选项卡时,它会重新加载并调用其生命周期方法,这些方法会给我带来问题.

有没有办法在更改选项卡时停止重新加载组件.

HTML代码:

<ngb-tabset>
    <ngb-tab title="xyz..." id="overview">
        <ng-template ngbTabContent>
            ...
            <sd-tags [existingTags]="tags" [somethingelse]="otherstuffs" [more]="morestuff"></sd-tags>
            ...
        </ng-template>
    </ngb-tab>
    <ngb-tab [title]="sothingesele" id="columns">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
</ngb-tabset>

更改选项卡后,sd-tabs组件将重新加载以及处理的内容将进入初始阶段并导致问题.

我正在尝试动态创建和显示组件，我需要将一些数据传递给它，以便它知道要显示什么。

这是我的代码：

html部分：

<div class="basicContainer">
  <div class="projectsTreeContainer">


    <input type="text" id="searchWord" placeholder="Search through projects"/>

    <button (click)="loadAddProject()">Add new Project</button>

    <app-projects-tree (onLoadProjectDetails)="loadProjectDetails($event)"
                       (onLoadWpDetails)="loadWpDetails($event)"
                       (onSelectAndLoadJobDetails)="loadJobDetails($event)"></app-projects-tree>
  </div>

  <div class="infoContainer">
    <ng-container *ngComponentOutlet="details"></ng-container>
  </div>

</div>

成分：

export class ProjectsComponent implements OnInit {

  details: Component;
  private showWp: boolean;

  constructor() {
  }


  loadProjectDetails(project: BasicProject): void {
     this.details = new ProjectComponent(project);
  }

以及我想要动态创建和显示的组件：

export class ProjectComponent implements OnInit {

  project: Project;

  constructor(basicProject: BasicProject) {
    this.project = new Project();
    this.project.name = basicProject.name ;
  }

Ng 模块：

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent, …

我正在尝试使用引导程序创建一个选项卡组件。

<app-tabs>
  <app-tab [label]="'label1'">Description 1</app-tab>
  <app-tab [label]="'label2'">Description 2</app-tab>
</app-tabs>

我看过这篇文章：https : //juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ 但我的用例不同。

我需要<ng-content>在 for 的每个循环中使用不同的。这是我的 plunker：https ://plnkr.co/edit/N2p8Vx ? p = preview 它在第二个选项卡中打印两个描述，将第一个留空。

感谢任何帮助！

我有以下组件:基本组件A.组件B和C继承自A.

@Component({
  selector: 'A',
  template: `<div>A</div>`
})
export class A {}

@Component({
  selector: 'B',
  template: `<div>B</div>`
})
export class B extends A {}

@Component({
  selector: 'C',
  template: `<div>C</div>`
})
export class C extends A {}

还有一个包含所有A,B和C组件的组件类:

<A></A>
<B></B>
<C></C>

我的问题是如何获得所有A,B和C的查询？

我试过了

@ViewChildren(A) components: QueryList<A>;

但它只给我一个A组件.

这里也是一个证明这个问题的plunkr.

先感谢您.