angular-components

问题 I have component in Angular 2 called my-comp: <my-comp></my-comp> How does one style the host element of this component in Angular 2? In Polymer, You would use \":host\" selector. I tried it in Angular 2. But it doesn\'t work. :host { display: block; width: 100%; height: 100%; } I also tried using the component as selector: my-comp { display: block; width: 100%; height: 100%; } Both approaches don\'t seem to work. Thanks. 回答1: There was a bug, but it was fixed in the meantime. :host { } works

问题 I would like to set the body of <ng-content> while instantiating a component dynamically using ComponentFactoryResolver . I see that I can get access to input & output using ComponentRef , but not a way to set <ng-content> . Please note <ng-content> I\'m planning on setting can contain simple text/can span dynamically created components @Component({ selector: \'app-component-to-project\', template: `<ng-content></ng-content>` }) export class ComponentToProject implements AfterContentInit {

问题 I have created a child component which has a method I want to invoke. When I invoke this method it only fires the console.log() line, it will not set the test property?? Below is the quick start Angular app with my changes. Parent import { Component } from \'@angular/core\'; import { NotifyComponent } from \'./notify.component\'; @Component({ selector: \'my-app\', template: ` <button (click)=\"submit()\">Call Child Component Method</button> ` }) export class AppComponent { private notify:

问题 I\'ve got a parent component: <parent></parent> And I want to populate this group with child components: <parent> <child></child> <child></child> <child></child> </parent> Parent template: <div class=\"parent\"> <!-- Children goes here --> <ng-content></ng-content> </div> Child template: <div class=\"child\">Test</div> Since parent and child are two seperate components, their styles are locked to their own scope. In my parent component I tried doing: .parent .child { // Styles for child } But

问题 I have a number of elements that I want to be visible under certain conditions. In AngularJS I would write <div ng-show=\"myVar\">stuff</div> How can I do this in Angular 2+? 回答1: Just bind to the hidden property [hidden]="!myVar" See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn't get hidden because it has a style :host

问题 Does anybody know how to get hold of an element defined in a component template? Polymer makes it really easy with the $ and $$ . I was just wondering how to go about it in Angular. Take the example from the tutorial: import {Component} from \'@angular/core\' @Component({ selector:\'display\' template:` <input #myname(input)=\"updateName(myname.value)\"/> <p>My name : {{myName}}</p> ` }) export class DisplayComponent { myName: string = \"Aman\"; updateName(input: String) { this.myName = input