标签: angular2-components
如何在Angular2中隐藏和替换组件
您好我有一个父组件(A),它有2个子组件(B和C).父A在默认情况下显示子组件B.现在当单击按钮显示在父A上时,它将子组件B替换为子组件C.如何在angular2中单击按钮后用组件C替换组件B？
推荐指数
解决办法
查看次数
Angular2组件如何导入指令组件？
我刚升级到angular2最终版本,rc4有很多重大变化.其中一个是组件上不再有Directives集合......我想做这样的事情:
@Component({
selector: 'resource-tab',
templateUrl: './app/applicationMgmt/resource/resource-tab.html',
directives: [
NgSwitch,
NgSwitchCase,
NgSwitchDefault,
OtherResourceEditorComponent,
MvcResourceEditorComponent,
WcfResourceEditorComponent,
WebResourceEditorComponent,
WebApiResourceEditorComponent,
ConfigResourceEditorComponent
]
})
引用在视图模板上用作指令的其他组件...现在如何做到这一点？
推荐指数
解决办法
查看次数
简单的ng-content不能在角度2中工作
我试图转录内容.我有组件的以下标记:
<body>
<bn-menu>
<span>test</span>
<p>I am content</p>
</bn-menu>
</body>
以下组件:
import { Component } from '@angular/core';
@Component({
selector: 'bn-menu',
template: '<div><div>Jo</div><ng-content></ng-content></div>'
})
export class MenuComponent { }
但只有"Jo"才会显示,而不是"测试"或"我满意".我究竟做错了什么？
推荐指数
解决办法
查看次数
如何在组件渲染后从指令调用函数？
如何在组件渲染后从指令调用函数？
我有组件:
export class Component {
ngAfterContentInit() {
// How can i call functionFromDirective()?
}
}
我想要调用这个函数:
export class Directive {
functionFromDirective() {
//something hapenns
}
我怎样才能做到这一点？
推荐指数
解决办法
查看次数
将数据从服务传递到组件
在有人将其标记为重复之前以下是我尝试过但失败的链接
场景我想将数据从我的 ng2 服务发送到组件，并且正在使用 ng2 HTTP 从 API 加载数据
下面是虚拟代码
我的服务
@Output() event_callback: EventEmitter<any> = new EventEmitter();
getUserDetails(id)
{
var user_data;
this.loadRemoteUrl('getUserdata?user_id=' + id).subscribe(
data => { user_data = data},
err => console.error(err),
() => {
console.log('Inside My Service');
this.user_data = user_data;
this.event_callback.emit(this.user_data);
}
);
}
我的组件
constructor(private http:Http, private myService: MyService)
{
var userDetails;
myService.event_callback.subscribe(
data => this.callbackFunction()
);
}
callbackFunction()
{
console.log("Inside MyComponent")
}
控制台日志
Inside My Service
HTTP 请求正确返回数据，我在发出之前尝试转储，它工作但问题是我无法访问组件中的数据，我尝试传递数据，现在我只是一些记录消息来识别流，但仍然无法看到来自我的组件文件的日志消息。
我错过了什么？
推荐指数
解决办法
查看次数
在ngClass的条件实现中使用变量
我开发了一个Angular 2应用程序,我试图在其中应用CSS类ngClass.我已将类名存储在变量中className并尝试使用以下代码来应用:
第一种方式
Run Code Online (Sandbox Code Playgroud)[ngClass]={'{{className}}': expression}第二种方式
Run Code Online (Sandbox Code Playgroud)[ngClass]= {className: expression}
但他们都没有奏效.
推荐指数
解决办法
查看次数
Angular2检查对象是否在*ngIf内有peoperty
export interface Element {
name: string;
}
export class Room implements Element {
name: string;
type:string
}
export class Hall implements Element {
name: string;
}
我的varibale类型如下所示
selectedElement: Element;
现在在HTML中我如何检查对象是否具有属性'类型'？
<div *ngIf="selectedElement?.type">
my div
</div>
推荐指数
解决办法
查看次数
Angular 2，Cant能够从另一个组件访问一个组件中的变量
抱歉，如果这是一个重复的问题，我在整个Web上搜索了解决方案，但找不到任何解决方案，因此将其发布，正在尝试从另一个组件内部的一个组件访问变量
我尝试过的
我创建了对象类型的模型，并在组件A的方法中设置了值，并尝试从组件B访问该模型对象，以便可以为组件B的元素设置值，但将对象设为未定义
问题
组件A首先在浏览器中加载，在其中单击表行时它包含一个表，将行数据作为对象并将该对象设置为包含相似结构对象的模型，我可以在Component中获取对象值，而我尝试从组件B调用模型，以便可以访问对象值。但是获取的对象值是未定义的，这是由于组件B是在组件A模板内部调用的模态。
成分A
public rowSelected:boolean = true;
constructor(public users : User ) {}
getRowData(rowIndex: number, rowData: any): void {
this.rowSelected = $(rowIndex).hasClass('selected');
console.log(rowData);
this.users= rowData.FirstName;
console.log(this.users); // can able to get the object value
}
组件A模板
<div bsModal #editUserModal="bs-modal" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label="Close" type="button" (click)="editUserModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title"><b>Edit User</b></h5>
</div>
<div class="modal-body">
<componenetB #edituserDiv></componenetB>
</div>
<div class="modal-footer">
<button class="btn btn-primary btn-sm confirm-btn gap0" type="button" (click)="edituserDiv.EditUserSubmit()">Submit</button> …推荐指数
解决办法
查看次数
子路径上路由器出口内的角组件将不会填充可用空间
<router-outlet></router-outlet>导航到“ / child”路由时，我的应用程序的根目录将在子模块中显示以下组件：
child.component.ts
import {Component} from "@angular/core";
@Component({
template: `
<div style="display:flex; width: 100%; height: 100%;">
<custom-sidebar-component></custom-sidebar-component>
<router-outlet></router-outlet>
</div>`
})
export class ChildComponent {
}
现在，此组件可以正常显示，并可以按预期填充整个屏幕。但是，当我尝试导航到该模块的子路径时，例如说“ / child / home”，我希望以下HTML显示在<router-outlet></router-outlet>上面的组件模板中看到的子路径中。
child-home.component.html
<style>
.parent-style {
display: flex;
flex-flow: row wrap;
width: 100%;
height: 100%;
}
.box-style {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
background: red;
color: white;
border: 1px solid black;
}
</style>
<div class="parent-style">
<div class="box-style">Box 1</div>
<div class="box-style">Box 2</div>
</div>
但是这次，路由器出口的内容没有按我希望的那样填充可用空间。我能够看到我想要的结果的唯一方法是打开开发工具并编辑包装组件的Angular生成的_nghost属性。如何获得我的组件以填充可用空间？
这是我的期望
这就是我真正得到的
angular-routing angular2-template angular2-routing angular2-components angular
推荐指数
解决办法
查看次数
@Input in Angular 4
我是Angular 4的新手.根据我的理解,@ Input用于将值传递给组件.但是当我按照下面提到的那样使用它时它不起作用.
my-file.component.html
<h1 [user] = "currentuser"></h1>
my-file.component.ts
@Input()
user : string;
推荐指数
解决办法
查看次数