angular-components

问题 We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like " custom-tabs ". Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up. Usage looks very similar to the Angular Material API: <custom-tabs> <custom-tab [label]="labelA"

问题 I'm using *ngFor to iterate some data like this: <div *ngFor="let d of [1, 2, 3]"> {{d}} </div> Everything is fine and I got the result as expected: <div> 1 </div> <div> 2 </div> <div> 3 </div> Then, I wondered if I use a function instead of {{d}} , so I wrote a function: protected logAndReturn(item) { console.log(item); return item; } and I used it: <div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div> I got the same rendered HTML result as the first code, but console output wasn't my

问题 This question is quite simple but I can't get rid of it. I have a <header> in parent template and I need it disappear when displaying children template through routing module. What I expect is adding a class to the header tag so I can hide it via CSS. This is what I have: app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app', template: ` <header [class.hidden]="hide"> <h1>My App</h1> <ul> <li><a href="/home"></a></li> <li><a href="/showoff"></a></li> </ul> <

问题 I have 2 sibling components, I am doing an http request in one component, and if a particular condition happens, it should make another http request, written in another component. So I should be able to call the method within the first component. this is the first component: import { Component, OnInit, Inject } from '@angular/core'; import { Http } from '@angular/http'; import { SendCardComponent } from '../send-card/send-card.component'; @Component({ selector: 'app-input-field', templateUrl:

问题 I am trying to build a custom component using multiple ng-content in Angular 6, but this is not working and I have no idea why. This is my component code: <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> I am trying to use this component in another place and render two different HTML code inside body and header select of ng-content , something like this: <div #header>This should be

问题 I am trying to build a custom component using multiple ng-content in Angular 6, but this is not working and I have no idea why. This is my component code: <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> I am trying to use this component in another place and render two different HTML code inside body and header select of ng-content , something like this: <div #header>This should be

问题 Is there any shortcut to rename a component with the Angular CLI other than manually editing all the component files such as folder name, .css, .ts, spec.ts and app.module.ts? 回答1: No! There is no command which will change the name of all files generated using the component create command. So created ts , html , css/scss , .spec.ts files need to be manually renamed/edited. I am a frequent user of angular cli and I think this would be a nice-to-have command as some time we just create angular

问题 My Page structure is: <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> How can I update/refresh the app-header component, without refreshing the whole page? I want to hide a "Sign-In" link in the header, once the user had successfully logged in. The header is common in all the components/routes. 回答1: You can use a BehaviorSubject for communicating within different components throughout the app. You can define a data sharing service containing the

问题 My Page structure is: <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> How can I update/refresh the app-header component, without refreshing the whole page? I want to hide a "Sign-In" link in the header, once the user had successfully logged in. The header is common in all the components/routes. 回答1: You can use a BehaviorSubject for communicating within different components throughout the app. You can define a data sharing service containing the

问题 I am learning Angular, I have a CMS with API that returns contents of pages. pages can have short codes for forms, I have updated the API to replace short with a component selector Sample page contents would look like <div>bla bla bla </div> <app-form [id]="1"></app-form> In angular I have created FormComponent to load form accordingly, but when I get page contents with above mentioned selector I get the error 'app-form' is not a known element:..... I did some research and found that I need