我刚刚开始乱用Angular 2,我想知道是否有人能告诉我从元素中动态添加和删除事件监听器的最佳方法.
我有一个组件设置.当单击模板中的某个元素时,我想为mousemove同一模板的另一个元素添加一个监听器.然后,我想在单击第三个元素时删除此侦听器.
我有点使用普通的Javascript来抓取元素,然后调用标准,addEventListener()但我想知道是否有更多的" Angular2.0 "方式,我应该调查.
我在做什么我
有一个*ngIf基于简单布尔值隐藏/显示使用的组件.当组件变得可见时,我想将焦点应用于其模板中的子元素.
问题
如果我翻转布尔值,组件正确显示,但如果我尝试使用this._elRef.nativeElement.querySelector("div#test")它来获取对子元素的引用,则返回null.如果我等待几秒钟,相同的代码将返回对我所期望的元素的引用.
猜测
我假设在翻转布尔角后经过整个渲染周期以显示新的可见组件,并且在我querySelector()在下一行中应用时尚未完成.
我想知道的是
所以我想知道的是,我怎样才能确定我ngIf已经生效并且元素是他们在DOM中被选中的？
是否存在回调ngIf或者我是否可以强制视图更新并从中获取回调？
我希望这是有道理的.这是一个漫长的一天(漫长的一周),我太累了.
谢谢大家
如果它有帮助,我正在使用Angular2 v2.0.0-beta.15
晚上,
我正在研究使用电子来封装现有的angular2版本.我以为我干运行但实际包装似乎失败了(参见下面的最后一步),我想了解原因.这就是我正在做的......
创建项目
使用angular-cli启动新项目ng new electron-ng2-cli --style=scss
安装电子和电子建设者
编辑package.json
进行以下添加...
"main": "main.js"
"build":
{
"appId": "com.electrontest.testapp",
"mac": {
"category": "your.app.category.type"
}
}
并将以下内容添加到scripts...
"pack": "build --dir",
"dist": "build",
"electron": "electron main.js",
"postinstall": "install-app-deps"
创建main.js
我刚刚从电子快速入门复制了代码.我做的唯一改变是index.html我设置的位置/dist/index.html
修改基地
在index.html改变<base="/">到<base="./">
打包代码
运行ng build.这将所有打包的代码放入/dist
测试运行
运行npm run electron.这很好用.一个电子应用程序启动,我看到其中运行的角度内容.
为分发
运行创建应用程序npm run pack以创建打包应用程序.包装似乎没问题 - 我收到一个关于丢失图标的警告,并警告我的代码是无符号的,但我猜他们不应该是致命的？
问题是,当我现在通过双击运行应用程序时,Finder我在控制台中收到错误说: …
我正在为我的Google Cloud Firestore数据库设置安全规则.我试图允许删除文档只有在过去的时间戳值超过30天时才使用以下逻辑:
allow delete: if
resource.data.locked == false
&& (request.time - resource.data.timeStamp).seconds > 2592000;
当我尝试这个时,我得到了Error: Missing or insufficient permissions.所以,第一个问题 - 我是在做错了还是我的逻辑有缺陷？
作为后续问题,有没有办法调试规则？也许是一个console.log等价物,我可以看到条件规则的结果,因为它们被应用并检查我没有提交字符串代替时间戳或任何类似的愚蠢？
我假设那request.time是'现在'并且我resource.data.timeStamp是正确的并且一个减去另一个返回a Duration并且thatDuration.seconds返回a number但是我是这个的新手并且这些假设中的任何一个可能是错误的并且它将是伟大的能够在处理这些值时看到这些值.
干杯全都
我有一个这样的数据结构(集合和文档,而不是JSON当然,但你明白了):
{
users: {
user1:{
name: Alice,
groups: {
groupA:{subbed:true},
groupB:{subbed:true}
}
},
user2:{
name: Bob,
groups: {
groupC:{subbed:true},
groupD:{subbed:true}
}
}
}
}
基本上,这是注册用户ID和每个用户订阅的组ID.我想编写一个安全规则,只有当他们是当前的auth用户时才允许访问用户配置文件和子集合,并且根据我对文档的阅读,我认为通配符可以实现这一点......
match /users/{user=**}{
allow read,write: if user == request.auth.uid;
}
有了这个,我可以正常阅读user文档,但是当我尝试阅读groups子集时,我收到权限错误.我只能通过明确匹配子集合来使其工作...
match /appUsers/{user}{
allow read,write: if user == request.auth.uid;
match /groups/{group}{
allow read,write: if user == request.auth.uid;
}
}
...所以我的问题是,两个例子之间有什么区别,我对递归通配符有什么误解？我认为{user=**}第一个示例的部分应该user无限制地授予对文档及其所有子集合,子子集合等的访问权限(对于授权用户),并且应该不需要专门为存储的数据编写规则我在第二个例子中不得不这样做.
我只是在短时间内搞乱Firestore,所以这可能是一个真正愚蠢的问题:)
谢谢大家
我有一个NgFor用于构建一行元素的组件......
<div *ngFor="let item of list">{{item.text}}</div>
我不知道这些元素有多宽,但后来我需要能够引用一个特定的元素,获取它的left值并移动整个批次,以便所选择的元素与某一点对齐.
我通过添加id到每个元素来完成这个...
<div *ngFor="let item of list" [id]="item.id">{{item.text}}</div>
然后我就用标准getElementById()......
let el:HTMLElement = document.getElementById(someId);
let pos:number = el.offsetLeft;
这样可以正常工作,但似乎可以用更多' Angular2方式 ' 来完成.所以我的问题是......
这种方法可以吗？如果没有,那么获得由NgFor创建的元素的引用的最佳方法是什么,以便我可以获得它们的各种位置和风格属性.
干杯
我有一个名为Table的类,它链接到舞台上的剪辑.在安装过程中,我创建了许多Table实例,并为每个实例传递一个TableData类的实例.此TableData对象包含ID值.
我Array根据TableData的TableData实例中的ID值,选择了一些我的Table对象.
我希望使用的是: myArray.sortOn("tableData.id");
这似乎不起作用,我认为Array.sortOn()不能深入到子剪辑.我有办法实现这个目标吗？
我可以想到一些方法来解决这个问题，但我想就最“Angular”的方法提供一些建议。
我已经整理了一个我正在做的事情的例子。
主要组件用于NgFor遍历列表并创建一堆子组件。
每个子级在单击时发出一个事件，由父级拾取。每个孩子也有一个方法update()。
我想要的是我的主要组件以正确的方式获取对发出事件的任何子项并调用其update()方法的引用。
看起来很简单（可能很简单）但它是我正在构建的应用程序的一个非常重要的功能，所以我希望它尽可能地漂亮和干净。
为你的帮助干杯
TL;DR - 我正在将数据写入我的Firestore后端，然后尝试立即获取该数据。这适用于某些尝试，但在其他尝试中失败，并且似乎在写入数据和可用于exists()安全方法之间存在一些滞后。
这是一个很大的问题，但经过几天的沮丧之后，我设法将我的问题浓缩为一个 JSBin 示例。如果您能抽出几分钟时间来设置Firestore实例并为我进行测试，如果有人可以帮助解决此问题，我会很高兴。
如果你做到了这一点，我假设你有一个 Firebase 帐户并且可以轻松地执行以下操作...
完成后，在Database > Rules部分添加以下规则：
service cloud.firestore {
match /databases/{database}/documents {
match /appUsers/{user} {
allow read, write: if user == request.auth.uid;
match /{children=**} {
allow read, write: if user == request.auth.uid;
}
}
match /groups/{group}{
allow create: if request.auth != null;
allow read, write:if exists(/databases/$(database)/documents/groups/$(group)/linkedUsers/$(request.auth.uid));
match /{children=**}{
allow create: if request.auth != …我正在建造一个游戏Angular和(有史以来第一次)我正在尝试添加一个高分表.我已经建立了一个Firebase帐户并使Firestore (Beta)数据库工作并连接起来.
我想要一个非常简单的高分系统.用户无需登录或创建帐户,您只需打开,播放,然后,如果您获得高分,请输入您的姓名,并将其记录并显示在表格中.
所以我的问题是 - 在不需要登录且仅保存基本名称/分数/时间戳数据的情况下,是否可以将我的安全规则保留如下,或者是否有更好的方法来构建它们？
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
事实上,我得到一个警告,我的数据库对任何有参考的人开放,但在我的特殊情况下这真的很糟糕吗？有没有这个问题,我没有看到数据库newb？
任何建议都会很棒,因为这对我来说是一个新的(和复杂的)领域.
干杯
database security database-security firebase google-cloud-firestore