angular2-template | 易学教程

Angular 2: Styling router-outlet to have width < 100%

阅读更多关于 Angular 2: Styling router-outlet to have width < 100%

问题 I'm building an Angular 2 app which would have a side nav bar for screens wider than 500, and a bottom nav bar for screens less wide than 500. For now I was trying to assign a 20% width to the side bar, 80% to app content. The problem that I have is that the router-outlet content (i.e. the actual app) takes up the full width of the page instead of just 80%. It seems to be ignoring any styling I try to give it. Are we not supposed to style router-outlet directly? Or perhaps there is a better

Angular 2 Uncaught (in promise): TypeError: Cannot read property 'isActivated' of undefined

阅读更多关于 Angular 2 Uncaught (in promise): TypeError: Cannot read property 'isActivated' of undefined

问题 If I return to the same routing path it show an error "Uncaught (in promise): TypeError: Cannot read property 'isActivated' of undefined". But not show at first time. can any one help me ? routing const mainRoutes: Routes = [ { path: '', pathMatch: 'full', redirectTo: '/home' }, { path: 'home', loadChildren: './apps/home/home.module#HomeModule', canActivate: [AuthGuard], resolve: { crisis: NavigarionResolve } } { path: '**', component: PageNotFoundComponent } ]; Component import { Component,

Disabling a button by grabbing ElementRef: angular2

阅读更多关于 Disabling a button by grabbing ElementRef: angular2

问题 I'm trying to disable a button when it is clicked. By clicking I'm calling a function and I want to disable the button using that function. How can I access button's property with ElementRef and disable it? I'm not very familiar with how to use ElementRef. Any help would be greatly appreciated! 回答1: If you really wanted to disable the button via an ElementRef, you can use the ViewChild method to get a reference to your button and then set the button to disabled using its nativeElement

Angular2, how to pass a variable to a template that is cloned

阅读更多关于 Angular2, how to pass a variable to a template that is cloned

问题 In Angular2 I have a template code that I am cloning whenever the user clicks a button, just like answered here How to dynamically add a cloned node in angular2 (equivalent to cloneNode) I am trying to pass a variable to it, but it doesn't work. What's wrong? import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({ selector: 'my-app', template: ` <template #clone let-session> <div [id]="session">eps {

Angular2 this.router.navigate fires only once

阅读更多关于 Angular2 this.router.navigate fires only once

问题 I have the following tab structure in my page, with it's respective URLs given in braces: Main Tab (/page) / | \ / | \ / | \ / | \ Sub Tab 1 Sub Tab 2 Sub Tab 3 (/page/a) (/page/b) (/page/c) Component @Input() route: string = ''; selectTab(tab) { let route = this.router.url.split('?')[0]; /* Here redirectUrl = "/page/c" */ if (tab.redirectUrl.length > 0) { // console.log(tab.redirectUr); gives /page/c this.router.navigate([tab.redirectUrl]); // This works but reloads the page and is a very

ngFor not updating when @Input updated from google map marker event

阅读更多关于 ngFor not updating when @Input updated from google map marker event

I'm trying to build a simple app with angular2, I have the below component: @Component({ selector: 'map-menu', templateUrl: './angular-app/components/map-menu.html' }) export class MapMenuComponent { @Input() selectedMarkers: Array<google.maps.Marker>; constructor() { // setInterval(() => { // console.log(this); // }, 1000); } } when my map-menu.html is: <ul class="nav nav-sidebar"> <li *ngFor="#marker of selectedMarkers #i = index"><a href="#">{{marker.data.name}}</a></li> </ul> and in my app html I have: <map-menu [selectedMarkers]="selectedMarkers"></map-menu> and the list is not being

How to change app wide css in Angular 2?

阅读更多关于 How to change app wide css in Angular 2?

问题 In my application I have different CSS file like fire.css, lake.css each giving different look to complete application. Currently, I implemented with only 1 file main.css and added this file to index.html <link rel="stylesheet" href="resources/styles/main.css"> <link rel="stylesheet" href="resources/styles/themes.css"> <link rel="stylesheet" href="resources/styles/common.css"> <link rel="stylesheet" href="resources/styles/plugins.css"> Now I wanted to change this dynamically as user select

Angular: passing data back from dynamic component

阅读更多关于 Angular: passing data back from dynamic component

问题 Based on an example in the cookbook, I am creating components dynamically like this: private loadComponent(): void { const componentFactory = this.factoryResolver.resolveComponentFactory(MyInputComponent); const viewContainerRef = this.componentHost.viewContainerRef; viewContainerRef.clear(); const componentRef = viewContainerRef.createComponent(componentFactory); (<IComponent>componentRef.instance).data = data; } MyInputComponent's template would look like this: <input type="text" [(ngModel)

access local variable within *ngIf

阅读更多关于 access local variable within *ngIf

问题 I have a primeng (angular 2) dialog with a dropdown. I want to set focus to the dropdown when the dialog shows. The problem appears to be that my div is rendered conditionally. My code: <p-dialog (onShow)="fe.applyFocus()"> <div *ngIf="selectedItem"> <button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button> <p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown> </div> </p-dialog> In this code the button works fine, but the

passing multiple arguments or object in (click)

阅读更多关于 passing multiple arguments or object in (click)

问题 Problem is to pass the object or multiple arguments from template to component and use them to add data to API. task.service.ts addTasks(task: Task): Observable<Task>{ let headers = new Headers({'Content-type': 'application/json'}); let options = new RequestOptions({ headers: headers }); return this.http.post(this.tasksUrl, {task}, options) .map(this.extractData) .catch(this.handleError); } task.component.ts addTasks(task){ this.taskService.addTasks(task) .subscribe( task => this.tasks.push