注意:为简单起见,请将组件深度视为:
- Smart (grand)parent level 0
- dumb child level 1
....
- dumb grandchild level 2
....)
Run Code Online (Sandbox Code Playgroud)
有关智能/大/父/子组件如何在MULTI-LEVEL(至少3级)链上下传递和传递数据的各种选项和条件.我们希望将"智能"(宏)父组件保留为可以访问我们的数据服务(或原子/不可变存储)的唯一组件,并且它将促使与'哑'(大)子项交换信息.我们看到的选项是:
现在在'3'的情况下,愚蠢的(大)孩子必须注入消息服务.这让我想到了我的问题:
Q1:对于每个'哑'(大)孩子来说,注入一个消息服务似乎很奇怪.消息服务的最佳做法是为这个家庭提供专门的服务,还是重新回到上面提到的"智能"祖父母的数据服务?
Q1A:另外,如果所有组件都注入了服务,那么这比在链上下添加@ Input/@输出绑定要好得多吗?(我看到'哑'组件需要一些方法来获取信息的论点)
Q2:如果'聪明'的盛大父母正在与类似redux的商店(我们的ngrx)进行通信怎么办?与'哑'组件的通信最好通过注入/专用消息服务进行,或者最好将商店注入每个'哑'组件......或者?注意,除了数据(即向/更新商店或服务添加数据)之外,组件间通信是"动作"(例如:表单验证,禁用按钮等)的组合.
非常感谢!
我们正在研究将标准认证(登录)与我们的Angular SPA集成的最佳方法.我们遇到了两种模式(见下文),并希望看到哪种被认为是一种"更好"的架构,可以将身份验证集成到我们的Angular网站中.
模式1 - 保持与SPA的分离(参见此处):在此模式中,登录过程在SPA之外完成(单独的页面加载),一旦用户通过身份验证,它们将被重定向到SPA(另一个页面加载).
模式2 - 集成登录到SPA(参见此处和此处):在此模式中,身份验证过程在SPA中,登录状态通过Angular路由器和服务进行管理.
我们倾向于PATTERN 2,但是我们希望从SO社区中听到您的想法是什么,以及您如何比较这两种模式.
谢谢!
(这里简单的plunkr演示)
在第二次迭代遍历自定义对象的"数组" 后,使用ng-repeat 进行泄漏,如下所示:
<div ng-repeat="d_sampleObject in mySampleObjects">
{{d_sampleObject.description}}
</div>
Run Code Online (Sandbox Code Playgroud)
内存配置文件显示剩余的"d_sampleObject"未被取消引用.下面是更多细节(通过控制器和注入服务).在提供的plunkr链接中也进行了简单的演示.任何想法和帮助提前非常感谢!
注意: 'mySampleObjects'是以下实例的数组:
ml.MySampleObject = function (id) {
this.id = id;
this.description = 'this is object #:' + ' '+id;
}
Run Code Online (Sandbox Code Playgroud)
我有一个自定义对象模型,它反映了我们在AngularJS应用程序中使用的业务领域对象.我发现当我将一个自定义对象的实例传递给ng-repeat时,会保留一个引用(我认为是Angular)并且内存未被释放.这发生在ng-repeat的第二个'wave'(点击'refresh')上,因为它再次在其对象数组上进行迭代.此泄漏在我的个人资料测试中公开(在Chrome中). 这是plunkr中的一个简短示例.单击"刷新"按钮一次(或更多次)以查看泄漏的额外"d_sampleObject"对象实例(在Chrome配置文件检查中).注意,'d_sampleObject'名称仅在传递给ng-repeat时使用.我已经包含了下面进一步泄漏的额外对象实例('d_sampleObject')的屏幕截图.为什么会有泄漏?如何避免泄漏?
(注意,我发现如果我不通过对象迭代我的对象集合(JS数组)而是通过原始索引('整数'),则没有泄漏.泄漏似乎只发生在我使用作为ng-repeat迭代的结果的对象引用)
<!DOCTYPE html>
<html ng-app="memoryleak">
<head>
<meta charset="utf-8" />
<title>Memory Leak Test</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.min.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
<script src="dataservice.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="d_sampleObject in mySampleObjects">
{{d_sampleObject.description}}
</div>
<br>
<button …
Run Code Online (Sandbox Code Playgroud) 在我们为新的Angular项目做准备时,我们正在评估在我们的系统中采用的各种架构概念 - 尤其是状态管理.在过去,主动通知客户端组件存在自然的复杂性.今天,进入反应式编程和中央商店.
我理解维护"大型"中央存储的本质,其中包含相应的操作(在各种服务中),reducer和包含整个应用程序状态的订阅者.我也看到了使用这些纯函数减速器进行分层单元测试的好处.我的问题是,这是如何与"关注点分离"和"单一责任"的经典概念相结合,其中通过其专用服务(依赖注入)为这些组件维护状态,同时提供了相似的解耦?
为什么使用大型中央存储而不是单一服务来维持"包含"状态,这些服务会对订户进行更改并保持关注点分离(例如:客户数据与库存数据分开).虽然在SO和网络的其他部分都有这样的暗示,但我没有看到直接解决这个问题的参考文献.比较这两个概念(中央商店状态与依赖注入服务/单身状态)和/或做出的参考的想法非常受欢迎.
我们目前正在成功检测页面中目标 DOM 元素的突变。我们现在正在考虑将这些目标节点突变的某些属性聚合在一个“列表”中,以通过 AJAX 调用发送以在服务器上进行处理。来自服务器的回调将允许我们批量修改这些目标元素的属性。
然而,问题是何时进行第一个 Ajax 调用。显然我们知道突变何时开始(因此添加到列表中)。但是,我们永远不知道它们何时结束(MutationObserver 空闲)然后进行 AJAX 调用。当然,我们可以编写一个函数来检查列表的大小以及经过的一段时间,以便在函数唤醒时进行包含聚合列表内容的 Ajax 调用。
是这样还是有更好的处理方法?
想法赞赏!
(我提供了一个简单的工作解决方案作为回应)
我最近从 macOS 转移到 WSL 2。我有两个节点服务器在 WSL 2(Ubuntu 发行版)中运行。每个都必须可通过自定义主机名访问以用于开发和生产目的。我很难通过自定义主机名(即在某些 ../etc/hosts 文件中设置)访问节点服务器,尤其是考虑到 WSL 2 的动态 IP 会随着 WSL/pc 'boot' 而变化。如何在 WSL 2 中设置自定义主机名?
设想:
每个 node.js 应用程序服务器(再次在 WSL 2 中运行)必须从浏览器使用以下 URL/自定义主机名访问:
angular ×2
angularjs ×1
dom ×1
hostname ×1
hosts-file ×1
idle-timer ×1
javascript ×1
memory-leaks ×1
ngrx ×1
ngrx-store ×1
windows-10 ×1
wsl-2 ×1