angular-components

问题 I'm currently developing an Angular4 application and I want to import some javascript libraries but just for a single component . Currently I can easily import this libraries by defining their paths inside .angular-cli.json like that: { "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jqueryui/jquery-ui.js", "../src/assets/js/jquery/cometd/org-cometd.js", "../src/assets/js/jquery/cometd/jquery.cometd.js", ], ... } However, the mentioned scripts will be imported for

问题 I have read many articles about Angular folder structure. It is still not clear to me where do we put component services. Shared services between components are put under shared. But what about a service that is used only by a component? Usually I put all my component logic into a service and leave the component with code relevant only to UI stuff. Which one is better to use: Each component and its service into the same folder --app.component.html --app.component.ts --app.module.ts --app

问题 How can I access the child elements (here: <img> ) of @ViewChild() in Angular 2+ without explicit declaration? In template.html <div #parent> <!-- There can be anything than <img> --> <img src="http://localhost/123.jpg" alt=""> </div> In component.ts @ViewChild('parent') parent; public getFirstChild() { this.firstChild = this.parent.? // } The aim is, to be able to create a universal component that uses: <div #parent> <ng-content></ng-content> </div> So the child elements of #parent need to

问题 I have just installed a bearbones ng2 app using the ng2 cli. In my AppModule I added schema: [ CUSTOM_ELEMENTS_SCHEMA ] , and in my AppComponent template I have <row></row> . But I'm getting- Unhandled Promise rejection: Template parse errors: 'row' is not a known element: 1. If 'row' is an Angular component, then verify that it is part of this module. 2. If 'row' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

问题 Lazy loading is a commonly used technique. However, in Angular it seems that the granularity level of this technique stops at the module level. That means that you can have module main that loads in the browser, and then on special occasion module B and C and D can be loaded lazily. Almost all tutorials on web explain that. However, is there a way to load components lazily? Consider this simple example that user goes inside the application, and when clicks "invoices" link, URL changes to the

问题 I came across the following Plunker to dynamically add and remove components. According to the above link and from many other SO posts, I know how to access Input and Output properties: this.compRef.instance.someProperty = 'someValue'; this.compRef.instance.someOutput.subscribe(val => doSomething()); And I also have a directive "appFont". import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appFont]' }) export class HighlightDirective { constructor(el: ElementRef) {

问题 I'm writing a test for an Angular 4 component that is a login form. The form can be submitted by clicking on the "submit" button or by hitting enter in any input fields. This behaviour is dictated by the Angular form directive. I can write a test case that validates that a button click submits the form, but I can't trigger the submit behaviour with a keypress event. Template: <form (ngSubmit)="onLoginSubmit()" #loginForm="ngForm"> <div class="form-group"> <label for="userid">User ID</label>

问题 I have two links: ['/productlist',1000] ['/productlist',1001] These two links are on the same page. If I click on any link for the first time. It is redirecting to the page, but if I click on the other link it is not working. component.html code <a class="dropdown-item" (click)="GetProductList(subitem.SubCategoryID)"> <i class="mdi mdi-chevron-right" aria-hidden="true"></i> {{ subitem.SubCategoryName}} </a> GetProductList(SubCategoryID){ this.router.navigate(['/productlist',SubCategoryID]); }

问题 I am trying to understand the destruction process of Angular Components a bit more detailed than what I could find in the documentation. I was hoping someone here would be able to answer the following questions: Are properties on elements in the Component template removed before the event listeners of such elements are removed? In the destruction process of a Component, when and how does the de-registration of an event listener happen? Is there any more information available concerning the

问题 Here is my component: @Component({ selector: 'bc-goods-detail', template: ` <span>good id: {{good?.id}}</span> <input [value]="good?.name" (input)="onInput($event)" /> <button (click)="onClick()">Save</button> `, styles: [] }) export class GoodsDetailComponent { @Input() good: Good; @Output() save = new EventEmitter<Good>(); onClick() { this.save.emit(this.good); } onInput ($event) { this.good.name = $event.target.value; } } When I change the name in input and then I am pressing save button