Blogs[]2-克隆BlogComponent的最好方法: Angular to Navmenu combobox？
克隆BlogComponent的最好方法: Angular to Navmenu combobox？
在Angular中，要克隆BlogComponent并将其用作Navmenu组合框的最佳方法是使用Angular的组件继承和模板引用变量。
首先，创建一个新的组件，命名为NavmenuComponent，并在其模板中引用BlogComponent。可以使用Angular的模板引用变量来获取BlogComponent的实例。
<!-- navmenu.component.html -->
<app-blog #blogRef></app-blog>接下来，在NavmenuComponent中使用组件继承来继承BlogComponent的功能和属性。
// navmenu.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { BlogComponent } from '../blog/blog.component';
@Component({
selector: 'app-navmenu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavmenuComponent extends BlogComponent implements AfterViewInit {
@ViewChild('blogRef') blogRef: BlogComponent;
ngAfterViewInit() {
// 在这里可以访问和操作克隆的BlogComponent实例
console.log(this.blogRef);
}
}现在，NavmenuComponent已经继承了BlogComponent，并且可以通过模板引用变量blogRef来访问和操作克隆的BlogComponent实例。
关于Angular组件继承和模板引用变量的更多信息，请参考以下链接：
请注意，以上答案是基于Angular框架的，如果您使用的是其他框架或技术，可能会有不同的实现方法。
相关·内容
1回答
我有一个JSON数据，我想在Angular 8的paper.JS中使用它。
angular、angular8、paperjs
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { PaperScope, Project, Path, Point } from 'paper';
import * as $ from 'jquery';
import * as paper from 'paper';
declare const drawTrack:any;
declare const parseCrossingData:any;
declare
浏览 15提问于2020-06-23得票数 1
3回答
.Net核心Angular 2jQuery解密
jquery、asp.net-mvc、angular、asp.net-core、webpack
当我的angular组件生成完成后，我需要使用jquery函数。我找到了下面的用法，但我不能让它工作。
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Http } from '@angular/http';
declare var $:any;
@Component({
selector: 'nav-menu',
template: require('./NavMenu.componen
浏览 3提问于2016-12-09得票数 0
1回答
app.component.ts
import { Component, ViewChild ,AfterViewInit, ElementRef} from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html
浏览 2提问于2020-04-05得票数 0
1回答
角8 @ViewChild翻译
angular、angular8
我有一些在角7上工作的代码，但不是角8。
基本上是这样的：
@ViewChild(ChildComponent) child;
如何使这段代码在角8上工作，因为我知道它已经被更改了。
我要对上面的代码做些什么？
以下是完整的代码：
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";
@Component({
selector: 'app-paren
浏览 0提问于2019-07-07得票数 2
回答已采纳
2回答
角质材料的MatSort应用
angular、angular-material、material-design、angular8
我在我的customer.component.ts里有这个：
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { NorthwindService } from 'swagger';
import {LiveAnnouncer} from '@angular/cdk/a11y';
import {MatSort} from '@angular/material/sort';
@Component({
sel
浏览 1提问于2021-12-03得票数 0
1回答
两个角度组件之间的通信
angular、typescript
我想将子组件的数据用于父组件中的图表。在一个angular文档中，我找到了一种方法来解决我的问题，但它不起作用。我的图表仍然是空的。我是不是在代码中遗漏了什么，或者这项技术不能解决我的特殊问题？我添加了一些代码片段，以便以一种简单的方式表示问题。 Child.ts import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './
浏览 13提问于2021-10-06得票数 0
3回答
Angular:从子对象中无事件获取数据
javascript、angular
在这里使用Angular 6。我有一个页面，其中有大约2个子组件。第一个有两个输入文本，第二个有一个下拉列表。我的父组件只有一个按钮点击。 我知道我可以在我的子组件上使用Eventemitter并将值传递给我的父组件，但是如果没有按钮单击事件，我该如何传递来自我的子组件的值呢？我尝试使用ViewChild，但在视图完全加载之前会有延迟。我正在使用ViewChild，如下所示： --父母-- import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent }
浏览 8提问于2019-03-01得票数 1
回答已采纳
2回答
以编程方式单击子组件窗体中的按钮
angular
我试图在子组件中单击窗体上的一个按钮。我也尝试过使用ViewChild & ViewChildren，将模板引用为ElementRef。它都返回值，而不是本机元素。
import {
Component,
ViewChild,
AfterViewInit,
ElementRef
} from '@angular/core';
import {
HelloComponent
} from './hello.component';
@Component({
selector: 'my-app',
template
浏览 2提问于2018-08-22得票数 3
回答已采纳
2回答
角@视图子不加载路由器出口负载
angular、angular-decorator
下面的屏幕上有4个按钮，用于完成在组件之间传递数据的教程()。
我在@ViewChild部分遇到了麻烦。在四个按钮下面有一个路由器链接，在每个按钮上填充，单击相关组件。
当我单击@ViewChild按钮时，组件会显示，但是消息没有填充，它是空的。
当我第二次单击@ViewChild按钮时，该消息将按预期填充。
我相信这不是@ViewChild的预期结果。因此，我需要知道它为什么要这样做，以及如何纠正它，以便在第一次单击时消息是可见的。
教程说：“我们需要实现AfterViewInit生命周期挂钩来接收来自子程序的数据”，我已经这样做了。
下面是我的父母和孩子的代码。
浏览 2提问于2019-08-14得票数 0
回答已采纳
2回答
Angular2无法读取未定义的属性“”nativeElement“”
angular、data-binding
您好，我正在尝试使用viewChildren和elementRef从html中获取数据(在ngFor之后提取出来)，但我正在获取
Cannot read property 'nativeElement' of undefined
我做错了什么？我也在使用ngAfterViewInit
这些是我的代码(html)
<div id="tutor-price" #myDiv (click)="passCharge(r.value['charge'])"><span id="month">8 Tim
浏览 24提问于2017-07-11得票数 2
1回答
角2 @ViewChild不工作。无法读取未定义的属性“标题”
angular、typescript、viewchild
即使在使用@ViewChild导入之后，我也无法访问组件的属性。下面是密码。
header.monitor.component.ts
import { AdminComponent } from 'admin/admin.component';
import { Component } from '@angular/core';
import { ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'monitor-header'
浏览 0提问于2017-11-29得票数 2
回答已采纳
2回答
角2 ViewChild不工作
angular、typescript、angular2-template
我不明白当相同的代码在textarea元素上工作时，为什么textarea返回null，但是它不能在div上工作
模板：
<div #refId class = 'line_counter' >
{{lineNumber}}
</div>
构成部分：
import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
import {Globals} from "../../../globals";
@Component({
浏览 6提问于2016-12-18得票数 4
回答已采纳
2回答
什么是视角的ElementRef？
angular
你好，我是AngularJs的新手，最近我回顾了一些角码，我看到这样的：
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet } from 'vis';
@Component({
selector: 'app-test',
template: '<div #network></div>'
})
export class TestCompo
浏览 2提问于2020-02-28得票数 0
2回答
bootstrap5不能将未定义或null转换为对象
angular、bootstrap-modal、bootstrap-5、bootstrap5-modal
我正在尝试使用角11和引导5创建一个新的模态，但是得到了下面的错误。
ERROR TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at Object.getDataAttributes (bootstrap.esm.js:875)
at Modal._getConfig (bootstrap.esm.js:2821)
at new Modal (bootstrap.esm.js:2681)
at BaCarouselCom
浏览 2提问于2021-05-07得票数 0
回答已采纳
1回答
mat-datepicker作为ag-grid弹出窗口的单元格编辑器显示为空白
angular、angular-material、ag-grid
在我升级到angular 9之前，我有一个material datepicker作为ag-grid的单元格编辑器，它可以工作--现在datepicker弹出，但弹出窗口是空白的。我在同一页面上的其他区域中有日期选择器，它们在ag-grid之外工作得很好：
这是我的单元格编辑器：
import { Component, AfterViewInit, ViewChild } from '@angular/core'
import { MatDatepicker } from '@angular/material/datepicker'
@Component({
浏览 1提问于2020-06-09得票数 1
11回答
角@ViewChild()错误:预期的2个参数，但得到1
angular、typescript、viewchild
当尝试ViewChild时，我会得到错误。错误是“未提供选项的参数”。
两个@ViewChild都给出了错误。
import { Component, OnInit, ElementRef, ViewChild, Output, EventEmitter } from '@angular/core';
import { Ingredient } from 'src/app/shared/ingredient.model';
@Component({
selector: 'app-shopping-edit',
templateUrl:
浏览 0提问于2019-06-21得票数 315
回答已采纳
1回答
在ngAfterInit中设置nativeElement.style.color在Angular中不起作用
angular、typescript、viewchild
我正在学习Angular，只是遇到了一个奇怪的问题。当我将nativeElement.style.color设置为红色时，只有当我删除上面的img标记时，绘图文本才会变为红色。 这似乎是一个加载问题？但我使用了ngAfterViewInit()将绘图着色为红色。 希望有人能帮助我:) import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
import { ActivatedRoute } from '@angular/router
浏览 27提问于2019-12-16得票数 0
2回答
debounceTime到CodeMirror角
javascript、angular、typescript、rxjs、codemirror
我已经尝试了多个变体，也是在之后
使用ng2-codemirror 1.1.3库+ codemirror 5.33.0锚点
我所要做的就是将一个DebounceTime操作符附加到CodeMirror编辑器的change事件中
html：
<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>
ts：
import { Observable } from
浏览 0提问于2018-01-31得票数 3
回答已采纳
1回答
在subscribe方法中更改组件属性
angular、angular2-template、angular2-forms、angular2-services
我正在使用angular4开发我的前端部分。我有一个服务，它返回一个我想在我的component.So中订阅的观察值。如何在subscribe方法中加载数据后更改组件的属性，并在ngOnInit方法之后保持不返回其默认值。这是我的组件的代码：
import {CreateUserComponent} from '../create-user/create-user.component';
import {UpdateUsersCredentialsComponent} from '../update-users-credentials/update-users-cred
浏览 0提问于2017-10-17得票数 0
3回答
如何使用angular 4从父元素获取子DOM元素引用
angular、angular-components
我需要使用angular 4从父组件获取子组件DOM引用，但我无法访问子组件DOM，请指导我如何实现这一点。
parent.component.html
<child-component></child-component>
parent.component.ts
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'parent-component',
tem
浏览 2提问于2017-12-15得票数 10
回答已采纳
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
