angular-components

问题 I have multiple components (in an NgFor loop) that call the same service. What I would like is that when one component changes a value in that same service, that new value then gets sent to every component that calls that service and subsequently updates that value in a component variable. I hope that makes sense. If you need some more information, please let me know. 回答1: Instead of a BehaviorSubject (which are often overkill in simple scenarios), you can use simple getters: Service has some

问题 I am very new in Angular and I am finding some dificulties trying to add a component and use it into a project on which I am working on. I have a parent component view that contains thE referenceS to 2 child components, these one (used to show two different sidebar made using PrimeNG but I think taht it is not important): <mail-detail-sidebar *ngIf="visibleSidebar" [selectedMail]="selectedMail" [visibleSidebar]="visibleSidebar" (visibleSidebarEmitter)="visibleSidebarEmitter($event)"> </mail

问题 I have a reactive form. The setup is similar to this: myForm: FormGroup; this.myForm= new FormGroup({ name: new FormControl("", [Validators.required, Validators.maxLength(15), Validators.pattern('...')]), ... }); I use this on my form like this: <input type="text" formControlName="name" /> <div *ngIf="name.errors?.required"> Name is required </div> <div *ngIf="name.errors?.maxlength"> Name must be {{ name.errors.maxlength.requiredLength }} characters </div> <div *ngIf="name.errors?.pattern">

问题 I'm trying to bind viewmodels to a view through component. Initially I did this in the component and it was almost working: model: any = { TenantId: '', CustomFieldName: '', quantities: [] }; quantity: any = { price: '', name: '' } Then on button click for adding new object of model I was doing this: addNewQuantity() { if (this.newQuantity) { this.quantity.name = this.newQuantity; this.model.quantity.push(this.quantity); this.newQuantity = ''; } } The issue with above event was that the same

问题 http://embed.plnkr.co/oGlcQSOM2vFcDEKP7thV/ $injector.has('myMessageDirective') returns true, while $injector.has('myMessageComponent') does not Is anyone struggling with this or has a solution? My "fear" is that my components might not be found in future updates because of the directive check. Follow up question to: Check if an Angular directive exists 回答1: At the end of the day, a component is registered as a directive, so 'Directive' suffix is indeed needed. Check 'has' method of $injector

问题 In my Plunker here (modified Tour of Heroes app from official docs) I created this method in the hero.service doHeroesExist(): boolean { console.log("doHeroesExist called..", this.heroesExist); alert("doHeroesExist called.." + JSON.stringify(this.heroesExist)); return this.heroesExist; } and use it in the app.component class ngOnInit(): void { //this.getHeroes(); this.heroesExist = this.heroService.doHeroesExist; console.log("app ngOnInit called...", this.heroesExist); } as call the

问题 I want to test my Angular component which is syntactically based on John Papa's styleguide: 'use strict'; angular.module('MyModule') .component('MyCmpnt', MyCmpnt()) .controller('MyCtrl', MyCtrl); function MyCmpnt() { return { restrict: 'E', templateUrl: 'myPath/myTemplate.html', bindings: { foo: '=', bar: '<' }, controller: 'MyCtrl', controllerAs: 'vm' }; } MyCtrl.$inject = ['MyService']; function MyCtrl (MyService) { // controller logic } As you can see I want to inject MyService into the

问题 I'm having 2 services in my angular frontend, one for API calls and one for sharing data two different components. So the second service is using the API service. If I only use the API service and subscribe my Observables inside my component, everything works fine(view in xxx.component.html). So if I declare the two services as providers inside app.module and inject the API Service inside the sharing service, it won't work any more. Using debugger, I always get variable "tmp" not defined in

问题 Is there any possibility in Angular2 to verify component selector with unit test? e.g. @Component({ selector: 'my-component', template: '<p>test</p>' }) export class MyComponent {} and .... it(`Component should have selector 'my-component'`, () => { expect(component.selector).toBe('my-component'); }); 回答1: Reflect metadata is used by Angular DI to store and retrieve decorator data. It is possible to get metadata from the class and assert it: const [componentDecorator] = Reflect.getOwnMetadata

问题 I am new to angular 4. I have a doubt in angular 4 embedded components. example: <hero-list> <hero></hero> <hero></hero> </hero-list> I wanted to know how to create a view based on this structure that is embedding component inside another component. 回答1: You should use <ng-content></ng-content> in your hero-list -component. So you can realize your wish above. hero-list.component.html <div class="hero-list"> <h1>Hero list</h1> <ng-content></ng-content> </div> And now you can wrap your hero