Angular 4中与第三方组件的数据绑定
在Angular 4中，与第三方组件的数据绑定是通过属性绑定和事件绑定来实现的。
属性绑定是将组件的属性值绑定到第三方组件的属性上，使它们保持同步。可以使用方括号语法将组件属性绑定到第三方组件的属性上。例如，假设有一个名为"myComponent"的组件，它有一个属性"myValue"，我们可以将它与第三方组件的属性绑定如下：
<my-third-party-component [thirdPartyProperty]="myComponent.myValue"></my-third-party-component>事件绑定是将第三方组件的事件与组件的方法绑定，以便在事件触发时执行相应的逻辑。可以使用圆括号语法将第三方组件的事件绑定到组件的方法上。例如，假设第三方组件有一个名为"onButtonClick"的事件，我们可以将它与组件的方法绑定如下：
<my-third-party-component (buttonClick)="myComponent.onButtonClick()"></my-third-party-component>通过这种方式，我们可以实现与第三方组件的数据交互和响应。
在Angular 4中，推荐使用ngx-bootstrap作为第三方组件库。ngx-bootstrap是一个基于Bootstrap的开源组件库，提供了丰富的UI组件和功能。它可以与Angular无缝集成，并且具有良好的文档和社区支持。
腾讯云提供了云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务。
相关·内容
嗨，我正在开发一个angular2应用程序，希望显示我的服务返回的数据的值。我能够看到数据时，我做一个循环，并显示它通过插值，即双卷曲括号。但是，我需要将它分配给googlemap的属性。我不认为数据是通过不使用插值的普通循环呈现的。我怎么才能确定这个？下面是我的密码。请注意纬度和经度是型号。
使用这段代码正确呈现数据。
<ul>
<li *ngFor="let d of data">
<p>{{d.Latitude}}</p>
<p>{{d.Longitude}}</p
浏览 1提问于2016-12-10得票数 1
回答已采纳
我知道angular 2组件指令使用Shadow Dom，但我不清楚它们在多大程度上符合web组件规范。例如，像聚合物元素一样，这些元素可以被其他使用HTML导入的非Angular应用程序使用吗？
浏览 1提问于2015-04-27得票数 1
2回答
我在网上到处找，都找不到答案。我想知道，在将Angular元素的输入转换为脚本并转换为普通的HTML/JavaScript文件后，是否可以对其进行数据绑定。我在一个Angular环境中测试了数据绑定一个Angular元素，它工作得很好。只有当我将它作为脚本带到普通的HTML/JavaScript中时，它才会停止工作。有没有可能做到这一点，如果是的话，有人能给我举个例子吗？ 我们有一个名为my-element的角度元素，我希望将一个布尔值数据绑定到它的输入。 public _random: boolean = false;
@Input()
get random(): boolean {
浏览 16提问于2021-08-18得票数 0
注意:我并不是在寻找价值、工厂、服务和提供者‘食谱’，之间的区别
我在寻找关于定义它们的不同方法的澄清:如果我错了，请纠正我，但似乎
myApp = angular.module('myApp', [])
.value(...)
.factory(...)
.service(...)
.provider(...)
映射到
$provide.value()
$provide.factory()
$provide.service()
$provide.provider()
你可以用任何一种方法。我问了，并意识到我可以使用$provide作为modul
浏览 2提问于2014-02-07得票数 0
回答已采纳
1回答
还有一个：Uncaught Error: Unexpected value 'UserDialogComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
当前行为
摘要:包括使用reflect-metadata的外部库会导致一个错误，如：
预期行为
添加使用相同多边形填充的外部库不一定会导致错误。
带指令的问题的最小再现
错误描述:有两个组件：
AppComponent和UserDialogComponent
在我看来，
浏览 6提问于2017-08-07得票数 0
7回答
我知道Angular2没有双向数据绑定，但是有什么方法可以模仿Angular1.x中的双向数据绑定行为吗？
浏览 11提问于2015-05-26得票数 23
回答已采纳
如何将数据从角标记传递到@Component中的样式
这里是我的组件：
import { Component, Input } from '@angular/core';
@Component({
selector: 'icon',
template: `<svg class="icon"><use attr.xlink:href="#{{name}}"></use></svg>`,
styles: ['.icon{width:{{size}}px;}'
浏览 0提问于2017-01-14得票数 3
回答已采纳
我将为web应用程序使用knockout.js或angular.js库(绑定支持的b/c)。
我的问题是-您如何将这些库集成到现有的UI库中，如Dojo、jQueryUI、Ext.js、YUI、..例如，如何在UI库中使用数据绑定支持/语法？为了使用小部件表单UI库，你必须实现像定制绑定这样的东西吗？
浏览 2提问于2012-06-18得票数 9
回答已采纳
在Angular文档中，我经常找到数据绑定属性这个词，但我在google中搜索并找到了它的含义
这在答案中没有完全解释。在答案下，人们仍在质疑。如果它是被接受的答案，并不意味着它是正确的答案。有人能解释一下更多的细节吗？
浏览 0提问于2018-03-21得票数 1
2回答
我搜索了很多，以了解如果我在表单中始终使用双向数据绑定(ng-model)而不是单向数据绑定，是否会有一些糟糕的性能。我知道，对于每个双向数据库绑定，使用angular 1都会创建一个新的监视，而使用angular 1的大型应用程序可能会因此而出现性能问题。现在我需要知道，如果使用angular 2，如果我只使用单向数据绑定，是否会有一些不同？在不必要时需要避免双向数据绑定？
浏览 1提问于2016-09-13得票数 5
1回答
我正在尝试从组件中输出我的范围数据，但是在没有本地模板的情况下很难找到如何实现它。
由于不同的原因，我需要让标记ind HTML文件，而不是在js加载时进行解析。
这是目前为止的虚拟代码：(codepen：)
HTML：
<comp>
{{ $ctrl.testing }}
</comp>
不工作的JS代码：
angular
.module('Test', [])
.component('comp', {
controller: myCtrl,
});
function myCtr
浏览 3提问于2016-05-27得票数 4
回答已采纳
我已经开发了一个Jasmine规范来测试angular 2组件MiddleRowComponent。当我运行jasmine测试时，它给出了这个错误：
zone.js:388 Unhandled Promise rejection: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is
浏览 0提问于2016-11-21得票数 19
回答已采纳
2回答
我使用了嵌套在同一组件中的组件。当我更改父组件附加函数中的复选框时，调用正确且事件发射器工作正常，但当我更改子复选框时，附加函数被触发，但事件发射器不可用(据我所知，事件发射器与子函数没有绑定)。我想在更改子复选框时发出数据。
如果有人知道答案，请帮助我解决这个问题。使用嵌套在同一组件中的组件的术语是什么？
谢谢你
这是stackblitz链接 (请检查控制台)
tree.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component
浏览 2提问于2020-05-29得票数 3
我需要一些帮助，了解如何将模型数据从mvc应用程序传递到运行在mvc中的angular2组件。
假设我有一个包含组件的cs.html文件
<my-app></my-app>
这将加载angular2组件。我需要生成一些绑定，以使mvc模型与我的angular2模型保持完整。
首先，我试图通过Input属性向组件传递一个模型。
CSHTML文件：
在cshtml文件的顶部，我有：
@model MainModel
<script>
var model = @Html.Json(Model.Form.PassengerModel);
</scrip
浏览 0提问于2016-11-14得票数 0
1回答
我刚刚开始在聚合物上进行实验，并尝试在一个单页应用程序中与AngularJS一起使用它。因此，我选择了两个polymer-ui-components：polymer-ui-sidebar-menu和polymer-ui-pages。每当用户从侧边栏中选择一个项目时，页面组件应该用相同的索引显示其项.
但是如何连接这两个组件呢？
我尝试使用菜单中的onclick事件，但这并不像预期的那样工作。
也许除了他们自己的文档之外，在万维网上还有关于聚合物的有用文献？
更新：
HTML：
<polymer-ui-sidebar-menu label=Channels>
<polyme
浏览 1提问于2013-11-02得票数 5
回答已采纳
1回答
这个，它可能是一个旧的，但无论如何，我想有很多的前端开发人员，与智慧。
我正在尝试而不是来声明我的应用程序的主模块的插件。
假设我有以下模块化：
子组件模块
(function () {
'use strict';
angular.module('app.modules.table.detail', []);
})();
组件模块
(function () {
'use strict';
angular.module('app.modules.table', [
浏览 2提问于2017-10-26得票数 0
1回答
我有一个简单的应用程序，从示例API中获取数据。当将指令定义为组件时，试图找出错误的地方：
app.ts
import {Component, View, bootstrap, For} from 'angular2/angular2';
import {ArticlesSvc} from 'services/articlesSvc';
import {ArticleItem} from 'directives/ArticleItem';
@Component({
selector: 'main-app',
inject
浏览 0提问于2015-05-13得票数 3
回答已采纳
4回答
我试图在angular2上做一些事情，但是我无法找到关于这种行为的一些东西。
我有一个实现自定义组件的应用程序，如下所示：
import {Component,Input} from 'angular2/core'
@Component({
selector:'my-comp',
template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}
浏览 7提问于2016-01-05得票数 16
回答已采纳
2回答
我正在学习angular devp with component，考虑我的网页只有一个组件，如下所示
angular
.module('mainPageModule', [])
.component('mainPage', {
templateUrl: 'mainPage.html',
controller: mainPageController
});
控制器代码为：
class mainPageController{
constructor(){
let vm =this;
vm.va
浏览 0提问于2016-06-17得票数 1
如果我的angular2应用程序看起来像这样，顶部的金发女郎要和右边的生姜聊天，他们应该为它组织一个聚会吗？
发出事件，使用输入输出--这是angular2的方式吗？数据应该从子到父流到根，然后从父到子流到点？我是新来的，我经常希望有一些全局对象，在那里我可以保存一些所有组件都需要知道的信息。当该全局对象中的数据发生变化时，它应该神奇地改变它注入的所有其他服务和组件。例如，用户登录/退出，或者如果他单击按钮等等。
import {Injectable} from 'angular2/core';
@Injectable()
export object Globals {
浏览 3提问于2016-02-03得票数 22
在Angular2中，我有一个非常简单的形式：
Form.ts
import {Component, Input} from 'angular2/core'
@Component({
selector: 'my-form',
providers: [],
template: `
<form>
{{ details }}
<input type="text" placeholder="name" />
<input *ngIf="de
浏览 5提问于2016-03-25得票数 2
回答已采纳
我正在尝试用Angular编写web组件，但我似乎不知道如何将数据传递到组件中。
<my-component someId="1234"></my-component>
我希望找到一些方法来实现这一点，并在我的angular组件中获得someId。是否可以实现这一点，或者我是否应该尝试使用插槽？为了清楚起见，我问的是如何使用angular而不是普通的angular组件来制作。
浏览 0提问于2019-02-25得票数 2
我有一个使用asp.net核心和angular 5 (typescript)的SPA应用程序，我正在寻找通用的数据网格。我找到了，但现在没有维护它。有一些更多的付费数据网格，但我正在寻找开源。如何在Angular SPA应用程序中创建数据网格
浏览 0提问于2018-03-01得票数 0
我正在学习angularJS中的组件模式。我试图在组件模式中使用绑定。我使用的绑定名称是firstName。但问题是它没有约束力。当我将firstName替换为abc之类的任何东西时，它工作得很好。有人能说出是什么导致了这个问题吗？
组件代码如下：
(function () {
angular.module('mainModule').component('heroList', {
template: '<p>Hello from component {{$ctrl.firstName}}</
浏览 2提问于2017-08-15得票数 2
回答已采纳
1回答
我试图通过组件将一个值传递给我的控制器，但我仍然得到了这个未定义的消息。我是不是遗漏了什么？
myhtml.html
<my-component item="value1"></my-component>
<my-component item="value2"></my-component>
<my-component item="value3"></my-component>
mycomponent.js
angular
.module('mycompone
浏览 1提问于2017-06-20得票数 0
6回答
Angular 1.x (AngularJS)或多或少遵循了MV*的设计原则，因为它具有双向数据绑定功能。
Angular2正在采用基于组件的UI，这是React开发人员可能很熟悉的一个概念。在某种意义上，Angular 1.x控制器和指令模糊成了新的Angular 2组件。
这意味着在Angular 2中没有控制器，也没有指令。相反，组件有一个选择器和一个@View，选择器对应于组件将表示的html标记，@View指定要填充的组件的HTML模板。
Angular2仍然实现双向数据绑定，但不包含模型，例如，如果我有一个显示文章列表的@Component和一个定义文章对象的class：
clas
浏览 0提问于2016-04-30得票数 78
我使用simple-peer js来创建视频聊天，问题是它是一个第三方库，它不能与angular系统通信，比如angular不跟踪属性绑定更改等。下面是代码
export class AppComponent implements OnInit, OnChanges {
@ViewChild('myVideo') myVideo:any;
texttoken :string;
targetpeer: any;
peer: any;
n = <any>navigator;
ngOnInit() {
let video = th
浏览 20提问于2017-06-28得票数 0
<div *ngIf="((one===one)&& (two===two)) || (one===two)"></div>
Angular如何计算这个相当复杂的表达式？
它肯定没有使用eval，那么它如何解析和评估它呢？
有人能给我指个方向吗？
我正在查看ngIf的源代码，但似乎没有发现任何有趣的东西。
似乎在ngIf收到这个值的时候，它已经被angular评估过了。
浏览 3提问于2017-08-30得票数 2
我在我的角度应用程序中使用了诱杀器，它被分割成这样
这是我的Datepicker.html文件
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="
浏览 1提问于2021-01-11得票数 0
1回答
尝试编写一个简单的登录页面时，我在理解为什么.components绑定不起作用方面遇到了一些困难。
示例
模板：login.html
<form>
<fieldset>
<label>Email</label>
<input id="email" type="email" ng-model="login.user.email">
<label>Senha</label>
<inpu
浏览 1提问于2017-03-30得票数 0
回答已采纳
7回答
我试图理解OnInit在angular2中的功能，并阅读文档：
描述
在您的指令的数据绑定属性初始化后，实现此接口以执行自定义初始化逻辑。
ngOnInit是在指令的数据绑定属性第一次被检查之后，在检查它的任何子程序之前调用的。在实例化指令时只调用一次。
我不明白directive's data-bound properties是什么意思？
浏览 0提问于2016-09-07得票数 32
回答已采纳
2回答
我正在从一些服务中获取页面的一部分。如何实现angular表达式或路由器人员作为动态内容工作？
Controller.ts
variable = 'some text';
dynamicContent ='
{{variable}}
Or
<a [routerLink]="contact"]></a>';
View.html
<div>
{{dynamicContent}}//plain text
<div [innerHtml]="dy
浏览 0提问于2017-02-16得票数 0
1回答
带角度触觉装置的脚注
、、、、
我希望我的角度应用程序能够在移动设备上显示一个带有单击事件的脚注，用于注入nativeElement.innerHTML的文本。我不认为我在第一次尝试中很好地解释了它，所以我会再试一次，我确实读过关于模板和数据绑定的文章。问题是，当文本被注入nativeElement.innerHTML时，它无法工作，所以我需要一些其他的方法来做到这一点。下面是一些代码和一个失败的plunkr。
import {Component, NgModule, VERSION, ViewChild, ElementRef} from '@angular/core'
import {BrowserMod
浏览 1提问于2017-08-08得票数 0
我创建了一个示例项目，在其中我使用了组件，一个带有注册名，另一个具有登录名，同时验证注册页面，给出下面提到的错误。
当表单验证时，错误发生。
>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
</div>
<div>
<input type="email" name="emailId" pla
浏览 1提问于2018-03-23得票数 2
回答已采纳
我刚接触Angular，只是一个关于输入元素上的数据绑定的问题。代码如下：
<input id="test" [paModel]="newProduct.name" (input)="newProduct.name=$event.target.value" />
和指令类：
@Directive({
selector: "input[paModel]"
})
export class PaModel {
...
@Input("paModel")
modelProperty: str
浏览 5提问于2019-11-01得票数 0
1回答
我正在学习Angular，并使用实际分析Angular材料分页器。
实际上，mat-paginator页面计数器是基于课程lessonsCount的“静态”属性的：
<mat-paginator [length]="course?.lessonsCount"
“数据库”是：
export const COURSES: any = {
1: {
id: 1,
description: "Angular for Beginners",
iconUrl: 'https://angular-acade
浏览 6提问于2018-09-28得票数 0
我正在使用基于Angular 1.6组件的方法构建应用程序。我有一个“文章”组件，其中包含一个“块”组件，我希望在ng-repeat循环中将数据从文章传递到块，但无法实现:以下是我的文章模板：
<md-content class="article-detail">
<div layout="row">
<div flex="20"></div>
<div layout="column" flex="60" layout-align="
浏览 0提问于2017-03-13得票数 0
1回答
我是角2\4中的新手(我来自Java)，对于使用PrimeNG“组件”的角项目，我有以下疑问。
我遵循了这个快速的"Hello“视频教程(在我看来是一个官方教程)来创建我的第一个示例，其中包括PrimeNG到我的角4 webapp应用程序：
我对这个例子的逻辑以及最终如何重构这个例子有一些疑问。
好的，正如你所看到的，它是这样写的：
<p-calendar [(ngModel)]="value"></p-calendar>
{{value | date:'dd.mm.yyyy'}}
与PrimeNG日历组件相关(我认为它是一个组件
浏览 3提问于2017-08-11得票数 0
回答已采纳
考虑到下面的代码，我试图理解三种不同的数据绑定方式之间的区别。因为我是angular4新手，所以我需要澄清一下什么时候该使用什么。例如，为了分配ngModel，使用了(ngModel)。若要分配禁用属性，请使用“禁用”。若要分配ngSubmit处理程序，则使用(ngSubmit)。很难区分其中的每一个。
<section class="sample-app-content">
<h1>Template-driven Form Example:</h1>
<form #f="ngForm" (ngSub
浏览 5提问于2018-01-10得票数 0
回答已采纳
2回答
我刚接触Angular，我的部分问题是我不知道这到底属于什么，所以我不知道从哪里去研究。
我正在构建一个保存按钮组件。这在我们的应用程序中存在10+时间，并且在每个视图中具有相同的外观和位置。但是，save函数会稍有不同，可能需要一些独特的表单验证，这取决于您单击它的位置。
保存按钮组件目前是超级精益的，并使用角度材料。
import * as save from './buttonSave';
import './buttonSave.component.less';
@save.Component({
selector: 'ui-butt
浏览 3提问于2016-07-28得票数 2
我只是想弄清楚构造函数和onInit函数在Angular2指令中的区别。在我看来，在创建对象时，两种方法都是使用的，那么为什么不使用构造函数呢？
浏览 5提问于2016-02-28得票数 4
回答已采纳
我想添加时间选择器在手持列，我只想添加没有日期的时间选择器。
但是我认为它在handsontable中是不支持的。
我怎么做呢?我在handsontable中搜索了时间选择器，但没有找到
顺便说一下，我在angular 5中使用handsontable
浏览 25提问于2018-04-27得票数 0
1回答
我正在尝试升级一个AngularJS 1.5应用程序到角4，我已经成功地引导了应用程序，并在AngularJS组件模板中加载了一个Angular4组件。
现在，我尝试使用第三方Angular4树组件，但它无法加载它。我知道只有根模块中定义的组件/服务可以在降级后使用，但是在混合应用程序中有使用第三方Angular4组件的方法吗？
如果没有，那意味着在整个应用程序转换为角4之前，混合应用程序中没有第三方角4组件和服务可以使用吗？这个假设正确吗？
浏览 0提问于2018-02-11得票数 2
回答已采纳
如何在Ionic 3和角4上的事件(例如，单击)中初始化fullCalendar？
当在变量中设置日历选项时，此代码可以工作：
calendarOptions: Object = {
fixedWeekCount: true,
editable: true
};
但是当我调用一个函数时，不要工作：
buildCalendar(): void{
this.calendarOptions: Object = {
fixedWeekCount: true,
editable: true
};
}
调用日历的Html代码
<angular2-fu
浏览 5提问于2017-09-26得票数 0
2回答
目前正在攻读Angular5课程，在对这个主题做了一段时间的研究之后，我仍然不完全理解以下内容：
代码：
App.component.html：
<app-server-element
*ngFor="let serverElement of serverElements"
[element]="serverElement"
></app-server-element>
App.component.ts：
import { Component } from '@angular/c
浏览 5提问于2017-11-12得票数 4
回答已采纳
我正在使用语义UI React和Formik构建一个注册表单。
无论我尝试了什么，我都无法在尝试提交表单时触发onSubmit事件，即使我暂时禁用了表单验证。
我只是简单地尝试console.log()一条消息，此时甚至不担心表单的值。
据我所见，应该是working...but，我还注意到，初始值也没有从该变量中填充。
我注意到，在某个时候，其他人已经开发了一个用于语义UI反应的包装器，将两个库的功能结合在一起，但也没有什么好运气(除非我也不正确地使用它)。
我应该抛弃<Formik />组件(尽管它似乎是使用它的最优方法)，而采用React实现吗？
我不知所措，不知道自己做错了
浏览 2提问于2021-07-24得票数 0
只有在应用程序启动时才能显示“在开发模式下运行的角度”，但是，在我的应用程序(Angular7)中，我看到消息以不同的间隔多次显示。有人遇到过这样的问题吗？
浏览 0提问于2019-04-22得票数 0
Package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@a
浏览 8提问于2016-12-27得票数 2
回答已采纳
当切换路由时。如何保持应用程序的状态不变？我观察到，每次切换选项卡时，Angular类都会重新初始化。
例如。
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
@Component({
})
@View({
template: `
<input class="form-control" [value]="test"> </input>
<br>
{{test}}
`
})
export class SearchPag
浏览 0提问于2015-09-24得票数 12
回答已采纳
1回答
我们使用的是角版本1.5.10和ui-路由器版本0.3.1。我们正在将控制器和服务组件化。
当我们试图打开模式弹出使用$uibModal.open方法。它正在打开模态弹出中组件的模板。但是它没有显示任何传递给在模型中打开的控制器的数据，使用resolve。
我们必须调用的项目组件如下-
import * as angular from 'angular';
export let ProjectComponent = {
selector: 'ProjectDetails',
templateUrl: 'app/entities/proj
浏览 0提问于2019-01-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
