viewchild

问题 I am using angular 5.2.0. I have a child component import { Component } from '@angular/core'; @Component({ template: `<div><\div>` }) export class ChildComponent { public childMethod() { ... } } and a parent component which accesses the child via ViewChild import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from 'child.component'; @Component({ template: `<child-component #child><\child-component>` }) export class ParentComponent { @ViewChild('child') public child:

问题 I'm trying to become better at Angular and I want to know the best practices between child-parent communication. My current app I want to work on is on Angular 6. I know I can communicate between child-parent components using @ViewChild, @Output or creating a service. Is there another way to do the communication? if not which one of those 3 is better and why? Here's a simple example: Child HTML <button (click)="onLinkedClicked();">Click me</button> Child TS import { Component, OnInit, Input,

问题 I'm trying to become better at Angular and I want to know the best practices between child-parent communication. My current app I want to work on is on Angular 6. I know I can communicate between child-parent components using @ViewChild, @Output or creating a service. Is there another way to do the communication? if not which one of those 3 is better and why? Here's a simple example: Child HTML <button (click)="onLinkedClicked();">Click me</button> Child TS import { Component, OnInit, Input,

问题 First of all, let me start off with saying that I did read the docs, some articles, the ng-book chapter, etc. I still don't have a good grasp of how these things work. With that said, consider the following: import { Component, ViewChild, ElementRef } from '@angular/core' @Component({ selector: 'home', template: ` <div>Test</div> <input type="text"#testElem> <input type="text"#testElem2> ` }) export class HomeComponent{ @ViewChild('testElem') el:ElementRef; @ViewChild('testElem2') el2

问题 I'm trying to access a native element in order to focus on it when another element is clicked (much like the html attribute "for" - for cannot be used on elements of this type. However I get the error: TypeError: Cannot read property 'nativeElement' of undefined I try to console.log the nativeElement in ngAfterViewInit() so that it is loaded but it still throws the error. I also access nativeElement in the click event handler, so that I can focus the element when another element is clicked -

问题 This question already has answers here : How to call another components function in angular2 (7 answers) Closed last year . I am using Angular 5. I want to call the child component method from parent component. For this I am adding the import {myChildComponent} from './myChild/myChild.component'; //ERROR: Cannot find module ./myChild/myChild.component How can I import the child component in any other component other than app.component.ts.(here it works) 回答1: You can simply call function of

问题 For some reason my @ViewChild in my Angular 5 App does not work. I have defined it like this in my component: case-detail.component.html: <div class="inner-tab-content" #innerTabContent> <!-- // more content here --> </div> I have implemented @ViewChild in my controller (above the constructor) like this: case-detail.component.ts @ViewChild('innerTabContent') tabContentElement: ElementRef; And I want to access it here in the component: case-detail.component.ts ngAfterViewInit() { console.log(

问题 If my fileInput element is in a normal div, then it works fine. But if I place it inside <ng-template></ng-template> then I am getting it undefined. Here is my code : HTML <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"></button> </div> <div class="modal-body"> <form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit

问题 From my component (ex. Component), I'm trying to instantiate an Angular component (ex. CustomComponent), set some properties, and send it over to a table (ex. CustomTable) for rendering, but I keep getting [object HTMLElement] instead of the rendered element in the table cell. Here's my setup: Component.html <custom-table [data]="tableData"...></custom-table> <custom-component #rowDetailTemplate></custom-component> Component.ts @Input() data: Array<CustomDataSource>; @ViewChild(

问题 I have the below code: <li *ngFor="let item of Array let i = index"> <span> <label (dblclick)="editTag($event,i)"> {{item.tag}} </label> <input type="text" #tagInput /> </span> </li> The code is in a for loop. When I click on a label, all labels should be hidden and the input should be visible. Currently, when I click on each label, the other remain open. How do I hide the other span when clicking on any item? I have below code in .ts @ViewChild('tagInput') tagNameTextInput: ElementRef;