我需要将数据从一个组件传递到另一个组件,我发现只有在url中使用路由参数的方法:
所以我对路由器中的目标组件进行了这样的配置:
{
path: 'edit-tags/:type/:name/:id',
component: EditTagsComponent,
},
我使用它来自另一个组件:
this.router.navigate([`../edit-tags/${product.type}/${product.name}/${product.id}`], { relativeTo: this.route });
它工作正常,但我不想id在url中显示,还需要将更多数据传递给组件.
我也见过在路由器中使用这样的配置:
{ path: 'test-product', component: ProductsContentComponent, data: { role: 'admin', type: 'test-product' } }
但我没有找到在另一个组件中使用相同方法的示例.
那么,有没有办法在路由中将一些数据从组件传递到组件而不在URL中反映它？
我试图围绕AngularJS组件的概念,我开始理解这个原理,但是当我尝试练习它时,我发现了一个例子,当我不确定如何使用组件实现它时.
我需要实现线性进度条,它有一个模板,所以逻辑上必须是一个组件,而不是一个指令,但我找不到在组件中进行DOM操作的方法,在这样一个小组件中有一个指令似乎很奇怪.这是带指令的基本实现:
JS
angular.module('test', [])
.controller('MainCtrl', function($q, $scope) {
$scope.curVal= 0;
$scope.maxVal = 100;
})
.directive('progressBar', [function () {
return {
restrict: 'E',
scope: {
curVal: '@',
maxVal: '@'
},
template: "<div class='progress-bar'>"+
"<div class='progress-bar-bar'>testing</div>"+
"</div>",
link: function ($scope, element, attrs) {
function updateProgress() {
var progress = 0;
if ($scope.maxVal) {
progress = Math.min($scope.curVal, $scope.maxVal) / $scope.maxVal * element.find('.progress-bar').width();
}
element.find('.progress-bar-bar').css('width', progress);
}
$scope.$watch('curVal', updateProgress);
$scope.$watch('maxVal', updateProgress);
}
};
}]);
HTML
<progress-bar cur-val='{{curVal}}' max-val='{{maxVal}}'>
CSS
.progress-bar {
width: 120px; …我正在使用Chart.js库绘制条形图，不仅要在条形悬停上显示工具提示，还要在该条的x轴标签悬停上显示工具提示。我找到了onHover用于配置的方法，但是它只允许我访问当前悬停的柱形数组，这没有用。
因此，如何访问鼠标事件并可能从那里取得位置以将其与条形标签的位置进行比较？还是有另一种方法？
我当前的配置：
const countryChartOptions = {
hover: {
onHover: this.onChartHover,
},
};
const onHover = (activeElements) => {
console.log(activeElements);
};
它只打印出悬停的条形数据，但我仍想弄清楚如何针对所需的行为扩展它。
我需要从配置对象到 设置元素的背景ng-style，但由于某些未知原因我不能这样做，这对我来说真的很奇怪，我真的找不到原因。
我正在尝试配置的元素：
<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }"></div>
pblc在这里代表控制器，我正在使用controllerAs选项
配置对象：
this.progressLOptions = {
color: '#F0F3F4',
width: '200px',
height: '20px',
};
最奇怪的是设置了宽度和高度，在渲染的 html 中我看到了这个：
<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }" style="width: 200px; height: 20px;">
</div>
我真的不知道 ng-style 怎么能像这样工作。是否存在我无法找到的背景问题？
我需要在我的angular2应用程序中使用masterKey,但我不能将其传递给initialize函数,我不能谷歌为什么.来自package.json:"parse": "~1.9.2".
初始化:
import {Parse} from '~/node_modules/parse/dist/parse';
@Injectable()
export class TFCloudService {
constructor() {
this.parse = Parse;
Parse.initialize(appConfig.parse.appId, null, appConfig.parse.masterKey);
Parse.serverURL = appConfig.parse.clientServerUrl;
Parse.liveQueryServerURL = appConfig.parse.liveQueryServerURL;
}
}
错误来源:
this.edittedUser.save(null, {useMasterKey: true})
.then((user) => {
console.log(user);
});
错误文字:
Error: Cannot use the Master Key, it has not been provided.
appConfig.parse.masterKey 工作正常,我也检查了硬编码键的行,但得到了相同的结果.