- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个公开给 window
的公共(public)方法。此方法与 Component
对话并修改我在模板中观察的变量。但是当我更改值时,*ngIf()
不会被触发。
应用组件
constructor(private _public: PublicService,) {
window.angular = {methods: this._public};
}
公共(public)服务
export class PublicService {
constructor(
private _viewManager: ViewManagerComponent,
) {}
CallMe(){
this._viewManager.renderView('page1')
}
}
布局管理组件
@Component({
selector: 'view-manager',
template: `<page *ngIf="view == 'page1'"></page>`
})
export class ViewManagerComponent {
//This is the variable being watched
view = "page";
renderView = function(type){
console.log(type)
this.view = type;
console.log(this.view)
};
}
所以想法是,当 View 最初加载时, View 是空白的。然后,当我键入 angular.methods.CallMe()
时,它会将 view
变量修改为 page1
,然后它应该显示组件的 html。如果我控制 renderView
函数它被成功调用,只是 View 没有改变。
-----更新 - 仍然无法正常工作--------
export class ViewManagerComponent {
constructor(private zone:NgZone,private cdRef:ChangeDetectorRef) {
}
view = "page";
@Output() renderView(type){
// type is 'page'
console.log(this.view)
this.zone.run(() => {
// type is 'page'
console.log(this.view)
this.view = type;
// type is 'page1'
console.log(this.view)
});
// type is 'page1'
console.log(this.view)
//cdRef errors:
//view-manager.component.ts:36 Uncaught TypeError: this.cdRef.detectChanges is not a function(…)
this.cdRef.detectChanges();
};
}
最佳答案
在这种情况下,Angular2 不知道它需要运行更改检测,因为更改是由在 Angulars 区域之外运行的代码引起的。
显式运行变化检测
contructor(private cdRef:ChangeDetectorRef) {}
someMethodCalledFromOutside() {
// code that changes properties in this component
this.cdRef.detectChanges();
}
显式运行修改 Angulars 区域内组件属性的代码
contructor(private zone:NgZone) {}
someMethodCalledFromOutside() {
this.zone.run(() => {
// code that changes properties in this component
});
}
zone
方法更适用于 //更改此组件属性的代码
不仅更改当前组件的属性,而且还会引起其他组件的更改(比如this.router.navigate()
,调用其他组件方法的方法引用)因为zone.run()
在Angulars zone中执行代码,而你不不需要在每个组件中明确处理更改检测,因为此调用可能会发生更改。
如果您使用 function(...)
而不是 () =>
,您可能会在 this
中得到意想不到的行为Angular 组件中的代码。
有关更多详细信息,另请参阅我对类似问题的回答 Angular 2 - communication of typescript functions with external js libraries
更新
export class ViewManagerComponent {
constructor(private zone:NgZone,private cdRef:ChangeDetectorRef) {
self = this;
}
view = "page";
@Output() renderView(type){
// type is 'page'
console.log(self.view)
self.zone.run(() => {
// type is 'page'
console.log(self.view)
self.view = type;
// type is 'page1'
console.log(self.view)
});
// type is 'page1'
console.log(self.view)
self.cdRef.detectChanges();
};
}
关于javascript - Angular2 从应用程序外部调用公开方法并丢失更改绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39971029/
例如 Form1 frm1 = new Form1(); TextBox tb = new TextBox(); frm1.Controls.Add(tb); 现在我不能说 f
我有一个日期过滤器,我已经在我的 View 中公开了它。我想让界面更加用户友好并加强它的外观。我不想选择日期,而是从以下选项中进行选择。 最后一天 上周 去年 全部 然后,这将过滤日期字段。这可能吗?
如何向用户公开我的用户控件组件之一的 ActualWidth 属性? 我找到了很多关于如何通过创建新的依赖属性和绑定(bind)来公开普通属性的示例,但没有关于如何公开像 ActualWidth 这样
Github 最近推出了项目功能。 当项目处于 repo 级别时,如果 repo 本身是公开的,那么任何人都可以访问这些项目。 但是,组织级别的项目仅对组织成员可见。 例如,https://githu
我想要从我的网络服务器访问 JavaScript 文件。 以便任何人都可以在其网站中访问和引用它。 e-g 假设 abcxyzserver.com 是我的网络服务器。 www.abcxyzserv
尝试使用curl命令上传到blob存储 curl --upload-file --url "https://.blob.core.windows.net//" 但不断收到“HTTP/1.1 404
我正在尝试获取 Canvas 的上下文,显然我收到错误Uncaught TypeError: Cannot call method 'getContext' of null 显然我在它初始化之前就得到
我正在对设置 HA 集群的解决方案进行故障排除。虽然我知道应用程序执行故障转移和故障回复所需的端口,但不知何故 dockerized 解决方案不起作用。我怀疑有一些我还不知道的端口。 目前,我的 EX
我试图在能够使用 Helm 运行的k8集群中设置Prometheus。当我使用外部IP将Prometheus-Server作为LoadBalancer服务公开时,访问仪表板。 当我尝试将此服务配置为C
我知道关于这个主题也有类似的问题,但我不完全确定他们正在解决同样的问题。所以要明确的是... 我有一个现有的类库,其中包含用于类型、业务逻辑和数据访问的命名空间。逻辑和数据访问命名空间中的类是静态的,
尝试使用curl命令上传到blob存储 curl --upload-file --url "https://.blob.core.windows.net//" 但不断收到“HTTP/1.1 404
1.)执行以下命令生成一个随机数,用于后面的步骤 NUMBER=$[ ( $RANDOM % 1000 ) + 1 ] echo $NUMBER 注意:将句子 your random number 替
类似这样的问题有很多,但仍然无法得到我真正想要的,而且它们都有一些与我不同的地方,那就是:我有一个 UserControl: 在名为UCProject 的类库项目中单独构建; UCProject 项目
我有一个这样的基类: public class BaseModalCommand { protected object m_commandArgument; protected i
给定以下 JQuery 插件。是否可以将变量“元素”公开给插件外部的 javascript?如果是这样,这是怎么做到的?对于此插件外部的 javascript,访问“元素”的语法是什么? (funct
我有两个使用 jhipster 创建的微服务。 (ms1 和 ms2) 我使用 AuthorizedFeignClient 在两个微服务之间进行通信。 ms1 有一些 DTO 类,用作 REST AP
我正在使用错误跟踪软件来报告网络浏览器中发生的任何错误,但我的生产站点上的代码已缩小。因此,调试几乎是不可能的(变量名被更改等)。 我想将完整的源映射文件投入生产,以便我可以调试这些错误,但在这样做时
我在 Kotlin 公开库中可以找到的所有 Material 都假定该表具有一个主标识列,因此在大多数示例中显示的实体继承了 IntEntity 抽象类。例如: class UserLocation(
我有一个类 (Capsule),它有很多 protected 方法 (30+)。这个想法是允许开发人员扩展此类并在类 (ImADev) 中使用 protected 方法,但将其留给开发人员将它们公开为
Tomcat 日志位置是: /apache/apache-tomcat-8.0.15/logs 允许通过浏览器访问这些日志的标准方法是什么? 为此启用 Tomcat 目录列表标准吗? 最佳答案 我曾在
我是一名优秀的程序员,十分优秀!