当用户点击该下拉菜单之外的任何地方时,我想关闭我的登录菜单下拉菜单,我想用Angular2和Angular2"方法"来做...
我已经实施了一个解决方案,但我真的对它没有信心.我认为必须有一种最简单的方法来实现相同的结果,所以如果你有任何想法......让我们讨论:)!
这是我的实现:
这是我的下拉列表的组件:
这是代码
export class UserMenuComponent {
_isVisible: boolean = false;
_subscriptions: Subscription<any> = null;
constructor(public subjects: SubjectsService) {
}
onClick(event) {
event.stopPropagation();
}
set isVisible(v) {
if( v ){
setTimeout( () => {
this._subscriptions = this.subjects.userMenu.subscribe((e) => {
this.isVisible = false;
})
}, 0);
} else {
this._subscriptions.unsubscribe();
}
this._isVisible = v;
}
get isVisible() {
return this._isVisible;
}
}
另一方面,有应用程序组件(它是下拉组件的父级):
这是代码: …
以前在rxjs4中,BehaviorSubject中有一个名为:
getValue()(doc here)的方法.
rxjs5中不再存在此方法.
所以我发现获得BehaviorSubject值的唯一解决方案是:
let value;
myBehaviorSubject.take(1).subscribe( (e) => value = e );
这段代码同步运行(我不完全理解为什么,但确实......)并获得了价值.它有效,但它不像getValue()现有的那样干净:
let value = myBehaviorSubject.getValue();
为什么getValue()在rxjs5中删除了这个问题最干净的解决方案是什么？
我正在尝试用Angular2 final完全理解变化检测.
这包括:
我以为我已经对这些概念进行了非常明确的概述,但为了确保我的假设正确,我写了一个小傻瓜来测试它们.
我对全球正确的一般理解,但在某些情况下,我有点迷失.
这是plunker:Angular2变化检测操场
对plunker的快速解释:
很简单:
parent属性可以通过以下任一方式传递给子组件:
对于每个子组件,可以附加或分离ChangeDetector.("detach()"和"reattach()"按钮)
OnPush子项具有可以编辑的附加内部属性,并且可以显式应用更改检测("detectChanges()"按钮)
以下是我得到无法解释的行为的场景:
Scenario1:
预期的行为: 我希望两个孩子都不会被更新,因为他们都有自己的变化探测器.
当前行为: 默认子项未更新,但OnPush子项已更新.. 为什么？ 它不应该因为它的CD分离...
Scenario2:
预期的行为: OnPush的孩子不应该全部更新,再次因为它的CD被分离...... CD不应该在这个组件上发生
当前行为: 更新值和内部值,将完整CD等接缝应用于此组件.
预期行为: 不应更新内部值,因为CD仍然已分离
当前行为: …
我正在尝试"插入"包含路由配置(从中导入RouterModule.forChild())的子ngModule(功能模块)到父ngModule中.
使用延迟加载时,使用loadChildren父模块路由配置中的密钥指定"插入"子模块的位置.
例如:
export const parentModuleRouteConfig = [{
path: 'myfeaturemodule',
loadChildren: '/app/child.module'
}];
实际上,我不想使用延迟加载.
如何告诉路由器"插入"(或使用)给定路径的子模块中指定的路由配置？
我面临一个非常奇怪的问题:
这是我的配置:
我在两个不同的地方工作,与不同的互联网提供商.
首先,一切正常,我可以运行开箱即用的Docker并访问互联网没有任何问题.
但是在第二个地方,当码头工人正在运行时我无法访问互联网,而且由docker创建的两个虚拟briges正在运行时更加精确.
在这个地方,互联网连接运行非常严格,我可以在8.8.8.8 ping谷歌dns,但几乎所有DNS请求失败,并且几秒钟之后大部分时间互联网连接完全关闭.
(第一和第二位的唯一区别是互联网提供商).
起初我认为我可以通过更改默认网桥ip来解决这个问题,但这根本不能解决问题.
关键是docker守护进程的--bip选项更改了默认的docker bridge docker0的IP ,但是docker还创建了另一个名为br-1a0208f108d9的桥,它不反映传递给--bip选项的设置.
我想这第二座桥会给我的网络带来麻烦,因为它与我的wifi适配器配置重叠.
我很难尝试诊断这一点.
我的问题是:
有了这个麻烦,我觉得我非常接近升级我的码头工作知识但在此之前我必须增加我的网络管理知识.
希望你能帮忙.
我将 lerna 与纱线工作区结合使用。在这种情况下，所有包提升和符号链接都由纱线工作区处理。
在这种特殊情况下，该命令的作用是什么lerna bootsrap？与原始相比，它带来了什么更多的东西吗yarn install？我们应该使用它还是简单地使用yarn install？
我开始使用Docker和nginx,我正在尝试设置一个运行的两个容器环境:
nginx:latest 在一边php:fpm 另一方面我遇到php-fpm问题:我总是遇到502 Bad Gateway错误.
我的设置很简单($TEST_DIR是我的工作目录).
我的Docker组成配置TEST_DIR/docker-compose.yml:
nginx:
image: nginx
ports:
- "8080:80"
volumes:
- ./www:/usr/share/nginx/html
- ./conf/nginx.conf:/nginx.conf
- ./logs/nginx:/var/log/nginx
links:
- php:php
command: nginx -c /nginx.conf
php:
image: php:fpm
ports:
- "9000:9000"
volumes:
- ./www:/var/www/html
nginx配置$TEST_DIR/conf/nginx.conf:
user nginx;
worker_processes 1;
pid /var/run/nginx.pid;
events {
worker_connections 2048;
multi_accept on;
use epoll;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" …我正在编写一个小实用程序函数,它使用必要的身份验证标头包含对AngularJS http.get的调用:
get(endpoint: string): Observable {
var headers = new Headers();
this._appendAuthentificationHeaders( headers, this.user.credentials);
return this.http.get(endpoint, { headers: headers })
.map(res => res.json());
}
这里的要点是,如果this.user为null,则该方法将崩溃.所以我有三个选择:
我想实现第三种方法,因为它允许我统一这个方法的行为:无论发生什么,它总是返回一个observable.
我正在使用Angular2 RC6编写Angular2库.
该库包含一个模块:
import { Component, OnInit, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'yeva',
template: '<div></div>'
})
export class YevaComponent {
constructor() { }
}
@NgModule({
imports: [CommonModule],
declarations: [YevaComponent],
providers: [],
exports: [YevaComponent]
})
export class YevaModule {
}
如果我将此代码复制粘贴到现有Angular2应用程序中的TypeScript文件中,并尝试直接使用此模块,则它可以完美地运行...
但我的目标是建立一个外部的npm库.
如果我在一个独立项目中移动这个完全相同的代码:
https://github.com/ClementVidal/starter.yeva
(此项目配置为用作Angular2库,使用TypeScript进行编译,以供客户端应用程序使用.)
我收到以下错误:
模块'AppModule'导入的意外值'YevaModule'
以下是我在两种情况下导入模块的方法:
@NgModule({
imports: [BrowserModule,YevaModule],
declarations: [AppComponent],
providers: [
FOUNDATION_PROVIDERS
],
bootstrap: [AppComponent]
})
export class AppModule {
}
此错误来自Angular编译器:
var importedMeta = _this.getNgModuleMetadata(importedModuleType, false);
if (importedMeta === …我在我的项目中使用 Bootstrap4 alpha，并且出于某些调查目的，我正在尝试使用 DOM 捕获 JQuery 事件 addEventListener()。
该事件是$("#mypanel").trigger("shown.bs.collapse")通过引导程序在折叠时使用 JQuery函数触发的组件中的。
如果我尝试使用 JQuery$("#mypanel").on("shown.bs.collapse", ... )函数捕获它，则一切正常。但如果我使用$("#mypanel").get(0).addEventListener("shown.bs.collapse", ... )在相应的 DOM 元素上使用，则不会“捕获”该事件
JQuery 事件系统和标准 DOM 事件系统不兼容吗？
让我认为它们实际上不兼容的一件事是，如果我使用 ChromemonitorEvents()功能来跟踪“shown.bs.collapse”事件，它根本不会出现。
欢迎任何关于此的反馈。
克莱门特
我正在努力将上下文数据传递给动态创建的嵌入视图.
注意:我正在使用Angular 2.4.7
这是我想要实现的目标:
在我的DialogPresetComponent (dialog-preset.component.html)中:
该组件的视图包含一堆模板,可以在我的对话框架中使用:
<template #presetInfo>
{{options.description}} // Note this binding ! Here is the problem
</template>
仍然在这个组件中,我得到了这样的模板:
@ViewChild('presetInfo', { read: TemplateRef }) presetInfo: TemplateRef<any>;
然后,我将此templateRef存储在DialogService中,以便稍后我可以从其他地方访问它们.
在DialogComponent (dialog.component.html)中:
这是我模态的模板:
<div class='c-header'>
</div>
<div class='c-body'>
<div #container></div>
</div>
<div class='c-footer'>
</div>
在DialogComponent (dialog.component.ts)中:
在我的DialogComponent中获取对容器的引用,如下所示:
@ViewChild('container', {read: ViewContainerRef }) containerRef: ViewContainerRef;
我还定义了我想从动态注入的模板访问的属性:
options: DialogOptions = { title: 'Dialog title' };
我想做什么:
我试图把模板#presetInfo的内#container的和我的背景下DialogComponent
最后,我在我的组件中注入我的模板,为其提供正确的上下文:
在我的DialogComponent …
根据我对javascript虚拟机如何工作的全球理解,我可以清楚地看到微任务/宏任务的概念起着重要作用.
以下是我对此的理解:
以下是我的问题:
为什么没有明确的API来操纵这两个队列.
就像是
pushToMacroTask( function )pushToMicroTask( function )实际上,接触操作这些队列的唯一方法就是使用setTimeout()将任务添加到宏任务队列Promises并将任务添加到微任务队列......
我很好,但是这并没有给我们一个有意义的API,你不觉得吗？
这个概念是否应该保留给JS开发者"隐藏"并仅用于某些hacky情况？
你知道围绕这个主题是否有任何W3C规范？
所有VM引擎都以同样的方式实现这个概念吗？
我很乐意听到有关这方面的故事和意见.
谢谢 !
angular ×6
javascript ×4
rxjs ×3
docker ×2
asynchronous ×1
bootstrap-4 ×1
dom ×1
gateway ×1
http ×1
jquery ×1
lerna ×1
linux ×1
module ×1
monorepo ×1
networking ×1
nginx ×1
npm ×1
observable ×1
php ×1
plunker ×1
rxjs5 ×1
templates ×1
typescript ×1
w3c ×1
yarnpkg ×1