我正在尝试跨控制器共享数据.用例是一种多步形式,在一个输入中输入的数据稍后用于原始控制器外的多个显示位置.下面的代码和jsfiddle这里.
HTML
<div ng-controller="FirstCtrl">
<input type="text" ng-model="FirstName"><!-- Input entered here -->
<br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here -->
</div>
<hr>
<div ng-controller="SecondCtrl">
Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>
JS
// declare the app with no dependencies
var myApp = angular.module('myApp', []);
// make a factory to share data between controllers
myApp.factory('Data', function(){
// I know this doesn't work, but what will?
var FirstName = '';
return FirstName;
}); …在模块中,控制器可以从外部控制器继承属性:
var app = angular.module('angularjs-starter', []);
var ParentCtrl = function ($scope, $location) {
};
app.controller('ChildCtrl', function($scope, $injector) {
$injector.invoke(ParentCtrl, this, {$scope: $scope});
});
示例:死链接:http://blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html
模块内的控制器也可以继承兄弟姐妹吗？
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl ', function($scope) {
//I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $injector) {
$injector.invoke(ParentCtrl, this, {$scope: $scope}); //This does not work
});
第二个代码不起作用,因为$injector.invoke需要一个函数作为第一个参数,并且找不到引用ParentCtrl.
我试图通过单击按钮导航到另一个页面,但它无法正常工作.可能是什么问题呢.我现在正在学习角度2,现在对我来说有点难度.
//Routes/Path in a folder call AdminBoard
export const AdminRoutes: Routes =[
{
path: 'dashboard',
component: AdminComponent,
children: [
{path: '', redirectTo: 'Home'},
{path: 'Home', component: HomeComponent},
{path: 'Service', component: ServiceComponent},
{path: 'Service/Sign_in', component:CustomerComponent}
]
}
];
//Button is also in a different folder. Click button to navigate to this page {path: 'Service/Sign_in', component:CustomerComponent}
<button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>
阅读Angular文档,您可以找到几个引用Web Worker中的整个Angular应用程序的引用,因此您的UI不会被大量的JS使用阻止.
但是,目前还没有关于如何做到这一点的官方信息,以及Angular Doc中的唯一信息.这是一个实验性的功能.
我如何使用这种方法来利用Angular中的Web工作者？
我的角度应用程序遇到了问题,我使用input作为数组,并在click事件出现时将值推送到数组.但是当数组推送完成时,ngOnChanges不会触发.有没有办法解雇ngOnChange
我的代码是ts文件
@Component({
selector: 'adv-search',
templateUrl: './app/modules/result.html'
})
export class InputComponent {
@Input() metas:any=[];
ngOnChanges() {
console.log(this.metas);
}
}
我的选择标签
<adv-search [metas] = "metaIds"></adv-search>
单击事件代码
insertIds(id:any) {
metaIds.push(id);
}
在角度js中"ng-bind"和"一次性绑定"之间有什么区别.
如果有任何差异,我应该在哪里使用它们？
我想要做的是使Angular 2简单组件在angular 1应用程序中运行.我正在阅读这份官方指南.我遇到了一些注射问题:
Unknown provider: $$angularInjectorProvider <- $$angularInjector
堆栈跟踪毫无意义,但显然错误是在角度本身的某处深处提出的:)
我当前应用程序的结构如下所示:
ng1.module.ts(入口点):
'use strict';
import { downgradeComponent } from '@angular/upgrade/static';
const angular = require('./lib/angular-wrapper');
const app = angular.module('application', []);
import { AppComponent } from './components/app/app.component.ts';
import { Ng2Module } from './ng2.module.ts';
app.directive(
'app',
downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory
);
angular.bootstrap(document.body, ['application']);
ng2.module.ts:
import 'reflect-metadata';
import '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppComponent } from './components/app/app.component.ts'; …我知道在Angular2中定义组件时,您可以实现多种类型的生命周期钩子,例如OnDestroy,NgOnInit等.
在我在网上看到的关于使用这些钩子的每个代码片段中,我只看到它们一次被使用一个.例如
export class ModalComponent implements OnDestroy { ... }
要么
export class ModalComponent implements OnChanges { ... }
但是如果你想为一个组件使用多个呢？例如,如果您想要OnChanges和OnDestroy的特定行为,该怎么办？我尝试过以下方法:
export class ModalComponent implements OnChanges implements OnDestroy{ ... }
export class ModalComponent implements OnChanges, OnDestroy { ... }
export class ModalComponent implements [OnChanges, OnDestroy] { ... }
export class ModalComponent implements OnChanges and OnDestroy { ... }
我确定答案非常简单,但我在找到答案时遇到了很多麻烦.
先感谢您!
我听说在使用隔离范围的指令中使用controllerAs语法是一个好习惯bindToController: true.参考文献:一,二
假设,我有这样的指令:
angular.module('MyModule').directive('MyDirective', function(User) {
return {
scope: {
name: '='
},
templateUrl: 'my-template.html',
link: function(scope) {
scope.User = User;
scope.doSomething = function() {
// Do something cool
};
}
};
});
<!-- my-template.html -->
<div>
User Id: {{ User.id }}
Name: {{ name }}
<button ng-click="doSomething()">Do it</button>
</div>
如您所见,此指令中没有控制器.但是,为了能够利用controllerAs,bindToController: true我必须有一个控制器.
将链接功能转换为控制器是最佳做法吗？
angular.module('MyModule').directive('MyDirective', function(User) {
return {
scope: {
name: '='
},
templateUrl: 'my-template.html',
bindToController: true,
controllerAs: 'myCtrl', …我有一个数据表组件(angular2-data-table)项目,我们将项目从Angular的传统变化检测更改OnPush为优化的渲染速度.
一旦实施了新的变更检测策略,就会在数据对象发生变异时引用该表而未更新的错误,例如对象的属性更新参考:https://github.com/swimlane/angular2-data-table/issues/ 255.对于诸如股票代码之类的大型数据集合中的单个属性的内联编辑或外部数据更改之类的事情,可以使用强大的用例.
为了解决这个问题,我们添加了一个名为的自定义trackBy属性检查器trackByProp.参考:提交.不幸的是,这个解决方案没有解决问题.
在实时重新加载的演示页面上,您可以看到上面提交运行中引用的演示但不更新表,直到您单击从而触发更改检测.
组件的结构类似于:
Table > Body > Row Group > Row > Cell
所有这些组件都实现了OnPush.我使用的getter/setter方法在行二传手触发网页重新计算像显示在这里.
我们希望继续OnPush对实现此模式的人进行更改检测,但是,作为一个具有多个消费者的开源项目,可以为屏幕上的可见行值争论某种自定义检查功能.
所有这一切,trackBy都没有触发行单元格值的变化检测,实现这一目标的最佳方法是什么？