angular2-template 相关问题

对于引用角度模板语法的问题,包括:插值,输入(属性)绑定,输出(事件)绑定,双向绑定,局部变量,星形语法等。此标记特定于角度版本2.x及更高版本

在属性上使用 Array.slice() 时,Angular2 模板不会更新

编辑:在我做了一些改进和重构之后,视图不会再次更新。我在下面编辑了我的更改。 我真的不知道如何将我的问题放在标题中,所以这是更长的版本......

回答 5 投票 0

如何在循环内注入组件

我们可以动态注入一个Angular组件ViewContainerRef.createComponent(),其中ViewContainerRef引用这样的模板引用 我们怎样才能实现同样的目标

回答 1 投票 0

如何在*ngIf中捕捉路线

所以我想让标题上的锚元素在点击特定页面时消失。当该页面被点击时,如何捕获 *ngIf 中的 url。 我有一个标题,它对所有的人都保持相同...

回答 4 投票 0

AspNetCore + Angular 2:新项目出现 WebpackDevMiddleware 错误

我正在使用本教程创建一个新项目: https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/ 接下来一些已解决的问题...

回答 1 投票 0

Angular 2 - 获取组件实例

我有两个这样的组件: @成分({ 选择器:'comp1', 模板:`{{ custom_text }}` }) 导出类 Comp1 { 自定义文本:字符串; 构造函数(文本:str...

回答 2 投票 0

Angular 2:如何编写 for 循环,而不是 foreach 循环

使用 Angular 2,我想多次复制模板中的一行。迭代一个对象很容易,*ngFor="let object of objects"。但是,我想运行一个简单的 for 循环,而不是

回答 14 投票 0

角度升级 16 至 17 后,Mat-Icon 不在 mat-mdc-menu-item-text 中

我目前正在从 Angular 16 迁移到 Angular 17。它是一个 Mat 图标,用于从 Mat 菜单中的列表中删除条目,旁边有一些信息文本。在一切都正确对齐之前,但是

回答 1 投票 0

Angular 2:修改后的导入模型不会在视图中更新

我更改了模型以适应使用实体框架的要求,但与该模型相关的视图无法使用新模型,即: 导出类 CV { 公共ID:号码; 公共用户 ID:str...

回答 1 投票 0

在角度模板驱动形式中使用“Validators.requiredTrue”

我需要验证用户在允许注册之前是否已选中“TOS”复选框。我想使用 requiredTrue 验证器来执行此操作,但我在文档中找不到我们的方法...

回答 2 投票 0

Angular 2 中使用 subscribe 调用成功、错误回调

它给出的responce.json () 不是我的案例的函数。 文件组件.ts this.AuthService.loginAuth(this.data).subscribe(function(response) { console.log("成功响应" + resp...

回答 3 投票 0

在 Angular 2 中使用 <a> 标签链接到其他 html 页面

所以我对 Angular 2 非常陌生,我正在使用它来制作个人网站。我有一个主页,上面有个人信息,另一个页面里面有博客内容。这两页都会...

回答 1 投票 0

Angular:如何以编程方式插入 HTML 关闭标签

这就像一个学院问题。它不适用于特定应用。 有一种方法可以用 *ngIf 条件关闭 HTML 标签,仅使用模板吗? 例如,我有一个有 4 列的表...

回答 1 投票 0

Angular 2 SVG 未渲染

我创建了一个组件来渲染我的应用程序中的 SVG 图像。 它们是动态加载的,但是,我的演示应用程序仅显示一个更简单的版本。 http://plnkr.co/edit/g2tZXeUAMJ5zESx2EHT0?p=...

回答 2 投票 0

如何禁用<md-expansion-panel>材质2角度2

我面临一些有关材料设计官方文档的问题, 他们说 可以使用disabled 属性来禁用扩展面板。禁用的扩展面板无法通过以下方式切换...

回答 5 投票 0

防止 mat-option 选择 if 条件

我想阻止选择 mat-option,因为单击它会打开一个对话框。仅当从对话框中选择某些内容时,才应选择我的选项。如果没有选择任何内容...

回答 3 投票 0

如何使用 Angular 2/4 开发搜索建议文本框

我是 Angular 的新手。我如何开发 Angular 2/4 中的下拉建议搜索框。单击搜索按钮时,将使用下面的代码显示详细信息。但是我在输入文本时尝试...

回答 4 投票 0

Angular 2 动态地将组件插入到特定的 DOM 节点中,而不使用 ViewContainerRef

我有一个关于 Angular 2 rc5 中动态组件创建的问题。 因此,我们假设有两个简单的角度分量: @成分({ 模板:` 我有一个关于 Angular 2 rc5 中动态组件创建的问题。 所以我们假设我们有两个简单的角度分量: @Component({ template: ` <div id="container"> <h1>My Component</h1> </div> `, selector: 'my-app' }) export class AppComponent { } @Component({ template: '<p>{{text}}</p>', selector: 'simple-cmp' }) export class SimpleComponent { public text='Hello World!' } 然后一些外部非角度代码块修改 DOM: let newNode = document.createElement('div'); newNode.id = 'placeholder'; document.getElementById('container').appendChild(newNode); 这是一些可能的经过操作后的树: <div id="container"> <h1>My Component</h1> <div id="placeholder"></div> </div> 所以我想做的就是动态地将 SimpleComoponent 实例添加到 #placeholder div 中。我怎样才能达到这个结果? 我一直在尝试使用 ComponentFactory.createComponent(injector, [], newNode),它虽然添加了组件,但生命周期挂钩和绑定都不起作用。 我相信有某种方法可以使用 ViewContainerRef 来实现这一点,但是如何将它与动态创建的节点链接起来? 这是我期望的结果 <div id="container"> <h1>My Component</h1> <div id="placeholder"> <simple-cmp>Hello world!</simple-cmp> </div> </div> 谢谢! 创建组件时,您可以传递将充当所创建组件的宿主元素的 DOM 节点: 创建(注入器:注入器,projectableNodes?:任何[] [], rootSelectorOrNode?: string|any, ngModule?: NgModuleRef): 组件参考 但是由于该组件不是任何其他组件的子组件,因此您必须手动将其附加到 ApplicationRef 以便获得更改检测。 所以这就是你需要做的: 1) 创建一个组件,指定应添加到的根节点。 2) 将视图附加到 ApplicationRef 以便获得更改检测。您仍然没有 Input 和 ngOnChanges 操作,但 DOM 更新将正常工作。 @Component({ template: ` <div id="container"> <h1>My Component</h1> </div> `, selector: 'my-app' }) export class AppComponent { constructor(private resolver: ComponentFactoryResolver, private injector: Injector, private app: ApplicationRef) { } addDynamicComponent() { let factory = this.resolver.resolveComponentFactory(SimpleComponent); let newNode = document.createElement('div'); newNode.id = 'placeholder'; document.getElementById('container').appendChild(newNode); const ref = factory.create(this.injector, [], newNode); this.app.attachView(ref.hostView); } } 永远不要在 Angular 之外修改 DOM,因为这会导致不可预测的行为。即使您手动附加 <simple-cmp> 元素,它也没有任何意义,因为它不是由 Angular 处理的。 Angular 应用程序内对 DOM 的所有更改都必须通过 Angular 方法。 动态创建新组件: @Component({ selector: 'my-component', template: '<div #element></div>', }) export class MyComponent { @ViewChild('element', {read: ViewContainerRef}) private anchor: ViewContainerRef; constructor(private resolver: ComponentFactoryResolver) { } whatever() { let factory = this.resolver.resolveComponentFactory(ChildComponent); this.anchor.createComponent(factory); } } 看看我在另一个帖子中对与此主题相关的问题的回答,也许对某人有用。

回答 3 投票 0

在angular2中使用subscribe调用成功、错误回调?

提供responce.json () 对于我的情况不起作用 组件.ts this.AuthService.loginAuth(this.data).subscribe(function(response) { console.log("成功响应" + 响应) }, 函数(e...

回答 3 投票 0

如何使用 Angular 编写数据属性?

我感觉自己错过了什么。当我尝试在模板中使用数据属性时,如下所示: 我感觉我失去了一些东西。当我尝试在我的 data 中使用 attribute template 时,如下所示: <ol class="viewer-nav"> <li *ngFor="#section of sections" data-sectionvalue="{{ section.value }}"> {{ section.text }} </li> </ol> Angular 2 崩溃时: 异常:模板解析错误:无法绑定到“sectionvalue”,因为 它不是已知的本地属性(“ ]data-sectionvalue =“{{section.value}}”>{{section.text}} 我显然遗漏了一些语法,请帮忙。 改用属性绑定语法 <ol class="viewer-nav"><li *ngFor="let section of sections" [attr.data-sectionvalue]="section.value">{{ section.text }}</li> </ol> 或 <ol class="viewer-nav"><li *ngFor="let section of sections" attr.data-sectionvalue="{{section.value}}">{{ section.text }}</li> </ol> 另请参阅: 如何在 Angular 2 中添加条件属性? 关于访问 <ol class="viewer-nav"> <li *ngFor="let section of sections" [attr.data-sectionvalue]="section.value" (click)="get_data($event)"> {{ section.text }} </li> </ol> 还有 get_data(event) { console.log(event.target.dataset.sectionvalue) }

回答 2 投票 0

角度5:templateRef.createEmbeddedView不是一个函数

这是我试图开始工作的代码(角度5): 从 '@angular/core' 导入 { Component, ViewChild, TemplateRef, ViewContainerRef }; @成分({ 选择器:'vcr', 模板:` <

回答 9 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.