angular2-components

问题 I am using Angular2 with Typescript Suppose I have the following in my app component's template: ... <coffee-cup [coffee]="" ... My coffee-cup component: @Component({ selector: 'coffee-cup', ... }) export class CoffeeCup { @Input() public coffee = 0; } I am currently unsure of what my Input should look like. It could look like this: @Input() public coffee = 0; Or @Input() private coffee = 0; I am currently leaning towards making the member variable coffee private. I want to define a clear

问题 I have an angular 2 webpack project where I currently have some functions that are repeated throughout several components. I would like to inherit all of these components from a "master" class OR component (whichever works), in order to be able to call my functions from all my components that need them. As an example, if I have a function foo in 3 different components: foo(s: string){ console.log(s); } I would like you move this function to another file/class/components: class parent{ foo(s:

问题 I just recently started diving into Angular 4 coming from Angular 1.5. I'm working with user routes and pulling API data from a service into a user component. The component seems to stay static unlike controllers in 1.* where they were refreshed on each request. Is there anyway to have the ngOnInit function called on each new route request? My user component class: // url structure: /user/:id export class UserComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit

问题 In angular 2, is it possible to manually instantiate a component A, then pass it around and render in the template of component B? 回答1: Yes, that's supported. You need a ViewComponentRef that can for example be acquired by injecting it to the constructor or using a @ViewChild('targetname') query and a ComponentResolver that also can be injected. This code example from https://stackoverflow.com/a/36325468/217408 allows for example to add components dynamically with *ngFor @Component({ selector

问题 In an Angular app, I have seen that @Component has property moduleId . What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [AppComponent] }); 回答1: The beta release of Angular (since vesion 2-alpha.51) supports relative assets for components, like templateUrl and styleUrls in the @Component decorator.

问题 In an Angular app, I have seen that @Component has property moduleId . What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [AppComponent] }); 回答1: The beta release of Angular (since vesion 2-alpha.51) supports relative assets for components, like templateUrl and styleUrls in the @Component decorator.

问题 I'm new to angular 2. I have a table, which on click of 'add consignment' option, it adds a new row with serial number and multiple input slots. Now on adding more consignments (which adds more rows of multiple input slots in table), and entering information to all these rows and submitting, only the values of last row is being returned. Can someone please tell me how to return the values of all the multiple input rows from the table as one single object? Thank you. Below is my code: Template

问题 I'm developing my first application with Angular 2 and I have installed Augury plugin for Google Chrome, in order to help me debug the code. Here's the components tree and graph: This is the HTML template of my custom component (DocumentsList): <div class="container-fluid" style="margin-top: 10px"> <div class="table-row header"> <div class="column index">#</div> <div class="wrapper attributes"> <div class="wrapper title-comment-module-reporter"> <div class="wrapper title-comment"> <div class=

问题 Creating an RPG character creator. I have a NewCharacterComponent and I am trying to implement a DieInputComponent inside it. The NewCharacterComponent is routed from an AppComponent. Important snippets of the code will be below. The issue I am running into is that I am not getting the DieInputComponent to load within the NewCharacterComponent. When I break the DieInputComponent code no errors are thrown in the console, so the error is likely that I am just not successfully importing the

问题 I have a text input and i'm listening for the changes. mycomponent.ts ngOnInit() { this.searchInput = new Control(); this.searchInput.valueChanges .distinctUntilChanged() .subscribe(newValue => this.search(newValue)) } search(query) { // do something to search } mycomponent.html <search-box> <input type="text" [ngFormControl]="searchInput" > </search-box> Running the application everything works fine, but i want to unit-test it. So here's what i tried mycomponent.spec.ts beforeEach(done => {