angular2-components

问题 When I code Angular 2 apps, my tsconfig.json file contains the following parameter: "outDir": "dist" meaning the TypeScript-to-JavaScript compilation will store generated files in the dist folder. My problem is when I try using components which have an external template or CSS file and which use component-relative paths, like so: @Component({ moduleId: module.id, selector: 'my-cmp', templateUrl: 'my.component.html', styleUrls: ['my.component.css'] }) export class MyComponent { } The browser

问题 Pretty standard situation. There is one parent component <item-list> . Inside its template with *ngFor generated 20 child components <item-block> . Child component styles set with [ngStyle] directive and template expression that calls function setStyles() . The problem (or maybe not) is that when any event emitted on one specific child element, expression setStyles() executed twice for each of child components. So if we click on one specific item in our example, and we have 20 <item-block>

问题 How can I call function from directive after component's rendering? I have component: export class Component { ngAfterContentInit() { // How can i call functionFromDirective()? } } And I want call this function: export class Directive { functionFromDirective() { //something hapenns } How can i do this? 回答1: You can retrieve Directive from Component's template with ViewChild like this: @Directive({ ..., selector: '[directive]', }) export class DirectiveClass { method() {} } In your component:

问题 Using Angular 4.1, I'm trying to dynamically change a module type's template before the module rendered. Is this possible? We are bootstrapping an unknown number of components on the page (from a known list of component types), and the page may contain multiple components of the same type. I've found out a way to give each of these components a different selector so they can be rendered separately (even if they're of the same type), but I also need to give each one a different template. The

问题 I have an implementation where parent wants to pass certain data to child component via the use of @Input parameter available at the child component. However, this data transfer is a optional thing and the parent may or may not pass it as per the requirement. Is it possible to have optional input parameters in a component. I have described a scenario below: <parent> <child [showName]="true"></child> //passing parameter <child></child> //not willing to passing any parameter </parent> //child

问题 I have an Angular 2 component where I want to retrieve an element div <div id ="myId"> by its id. I try doing: document.getElementById("myId") in my component (TypeScript), but i get an error: "cannot find name document". I see that in other posts we can do something similar using @ViewChild, however I don't see how we can use this with a div, any ideas? 回答1: You can use @ViewChild with a div by adding a TemplateRef. Template <div id ="myId" #myId> Component import { Component, ViewChild,

问题 I'm try to use simple-json-loader . I install this from npm and write following function: onclickExport() { var loader = require('simple-json-loader'); var json = loader.JSONLoader.loadFromFile('wwwroot/dist/data/files.json'); } Еverything seems simple, but when I run build in webback i see following error: ERROR in ./~/simple-json-loader/index.js Module not found: Error: Cannot resolve module 'fs' in D:\GitRepo\Magazine\Magazine.Web\node_modules\simple-json-loader @ ./~/simple-json-loader

问题 I am getting response from server,I want pass this response to other component for displaying. I tried in one way but getting undefined. Tried this way how to pass one component service response to other component in angular 2. yesterday got the results faced routing. Changed little bit created separated components. mainsearch.component.ts: export class MainsearchComponent { selected; skipCount: number = 0; errorMessage: string; searchedResults: any; searchObj: Object = { skipCount: this

问题 I have a child component that looks like this Child Component @Component({ selector: 'child-component', //TemplateUrl, Styles and Providers }) export Class ChildComponent implements OnInit{ @Input() arrayToGet; //An array that I want to pass from Parent to child ngOnInit(){ console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout } //A bunch of methods to work with the array I get } Parent Component @Component({ selector: 'parent-component', template: '<div

问题 Is it possible to get component class name or component reference using selector name in Angular 2? @Component({ selector: 'selector-1', template: '<h1>Hello</h1>', }) export class Component1 {} @Component({ selector: 'selector-2', template: '<h1>Hello</h1>', }) export class Component2 {} In component 2 is it possible to get the component1 class name using selector "selector-1"? Example: getComponentName(selectorName) { // return component name } getComponentName('selector-1'); Thanks in