angular2-template

Why does this method/gettor get called X times in an Angular 2 service

由 最后都变了- 提交于 2019-12-04 21:38:28
问题 I am trying to bind a value in my HTML component to a property in a service. If the private variable is null then it needs to go off and get the value from an HTTP call. However, I noticed that as soon as I bind to the property gettor in my HTML component then it fires multiple times. I have simplified the example with: this Plunker get Item(): string { console.log("Item()", this._item); return this._item; } Open the Console and observe the multiple outputs of "Item() Initiated". I would

Error: Please call “TestBed.compileComponents” before your test

由 时间秒杀一切 提交于 2019-12-04 19:12:05
问题 I'm getting this error: Error: This test module uses the component MessagesComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. When trying to run this simple test Angular 2 & Jasmine Test: let comp: MessagesComponent; let fixture: ComponentFixture<MessagesComponent>; describe('MessagesComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ MessagesComponent ], providers: [ {provide:

Angular2 passing function as component input is not working

由 ▼魔方 西西 提交于 2019-12-04 18:31:43
问题 I've a component that takes function as input. I've passed this function from parent. Though the function is called, the function is not able to access the dependencies of the instance on which this function is declared. Here is the component @Component({ selector: 'custom-element', template: ` {{val}} ` }) export class CustomElement { @Input() valFn: () => string; get val(): string { return this.valFn(); } } Here is how the component is used @Injectable() export class CustomService { getVal(

Call a component method from HTML in Angular2

由 喜你入骨 提交于 2019-12-04 17:24:25
问题 Is it possible to call a component method from HTML, or should I create another component to handle formatting? <div *ngFor="let item of items"> <div class="title">{{ item.Title }}</div> <p> callComponentMethodHere({{item}}) </p> </div> 回答1: {{callComponentMethodHere(item)}} but you should avoid that because the method will be called every time change detection runs. It's better to call the method in code (for example in the constructor() , ngOnInit() , or an event handler, assign the result

Angular, how parse template from string and pass current context variables

由 我是研究僧i 提交于 2019-12-04 16:36:40
I making a simple component to create tables: @Component({ selector: 'admin-table', template: ` <table class='table table-bordered'> <thead> <th *ngFor='let column of columns'> {{ column.label }} </th> </thead> <tbody> <tr *ngFor="let record of records"> <td *ngFor='let column of columns' [innerHTML]="fieldContent(column, record) | safeHtml"> </td> </tr> </tbody> </table> `, }) export class AdminTableComponent { @Input() columns: AdminTableColumn[]; @Input() records: {}[]; fieldContent(column: AdminTableColumn, record: {}) { if (column.template) { //TODO: parse the template and pass current

How can I pass a generic type parameter to an Angular2 component?

由 早过忘川 提交于 2019-12-04 16:29:10
问题 Let's say I got a component with a fixed input parameter type, @Component({ selector: 'fixed', template: '<div>{{value}}</div>' }) export class FixedComponent { @Input() value: string; } How do I go about making that parameter type generic, i.e. @Component({ selector: 'generic', template: '<div>{{value}}</div>' }) export class GenericComponent<T> { @Input() value: T; } That is, how do I pass the type in the template of the parent component? <generic ...></generic> 回答1: It seems that when

Angular 2.0.0-rc3: partial route matching with routerLinkActive

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-04 15:57:50
I'm using routerLinkActive in my primary routing. <a [routerLink]="/user" routerLinkActive="active">Bob</a> When the URL is /user , the active class will be added to the a tag, but under the primary route, I also have a few secondary routes, so when the URL is /user/aa , the active will be removed. I hope that when the URL is either /user/aa or /user/bb , the primary route's class active still exists. What should I do? Add [routerLinkActiveOptions]="{ exact: false }" As far as I know this is going to be the default with the next update. 来源： https://stackoverflow.com/questions/38090949/angular

Angular 2 unit testing - @ViewChild is undefined

由 会有一股神秘感。 提交于 2019-12-04 15:03:35
问题 I am writing an Angular 2 unit test. I have a @ViewChild subcomponent that I need to recognize after the component initializes. In this case it's a Timepicker component from the ng2-bootstrap library, though the specifics shouldn't matter. After I detectChanges() the subcomponent instance is still undefined. Pseudo-code: @Component({ template: ` <form> <timepicker #timepickerChild [(ngModel)]="myDate"> </timepicker> </form> ` }) export class ExampleComponent implements OnInit { @ViewChild(

Angular 2 Dynamic Page Header and Footer

由 天大地大妈咪最大 提交于 2019-12-04 13:54:29
The following is what is included in my app.component.html <lmenu></lmenu> <header></header> <router-outlet></router-outlet> <footer></footer> However my login and register pages are both rendered through this module and they only require the router-outlet. How an dynamically not include the lmenu, header, and footer selectors for the login and register views? Thanks in advance. <lmenu *ngIf="isLogin"></lmenu> <header *ngIf="isLogin"></header> <router-outlet></router-outlet> <footer *ngIf="isLogin"></footer> Just switching isLogin between true and false shows/hides the components you could use

can I use angular2 and Thymeleaf together?

由 杀马特。学长 韩版系。学妹 提交于 2019-12-04 13:46:27
I put the Thymeleaf th: in angular2 templates, but the th: wont compile. Is there any way I can use them together? import {Component, NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({ selector: 'my-app', template: ` <table xmlns:th="http://www.w3.org/1999/xhtml"> <tbody> <tr> <th>User Name</th> <th th:each="role : ${roles}"> <div class="row"> <div th:text="${role.type}"></div> </div> </th> </tr> </tbody> </table>`, }) export class App {} You're mixing two frameworks for frontend together. Angular is frontend framework processed at client side,
订阅 angular2-template