Javascript 如果组件不';不存在?
如果我在引用不存在组件的组件中有一个模板,angular 1.6似乎非常乐意将其渲染为一无所有。例如,我当前有一条路线,看起来像:Javascript 如果组件不';不存在?,javascript,angularjs,Javascript,Angularjs,如果我在引用不存在组件的组件中有一个模板,angular 1.6似乎非常乐意将其渲染为一无所有。例如,我当前有一条路线,看起来像: when('/something',{ title: 'Something', template: "<mycomponent></mycomponent>", }) 当(“/something”{ 标题:“某物”, 模板:“”, }) 如果我忘记在我的应用程序上注册mycomponent,此路由将不提供任何内容。在这种情
when('/something',{
title: 'Something',
template: "<mycomponent></mycomponent>",
})
当(“/something”{
标题:“某物”,
模板:“”,
})
如果我忘记在我的应用程序上注册mycomponent
,此路由将不提供任何内容。在这种情况下,是否有一些模式可以用于角度测量,从而导致更大的误差?或者至少在控制台上打印一些东西
非常清楚,路由器引用的顶级组件以及那些递归引用的其他子组件都存在此问题。不,没有选项。顺便说一句,“未渲染”组件对我来说是一个好处,因为您可以稍后覆盖此插槽 举个简单的例子:
when('/something',{
title: 'Something',
template: "<slot><mycomponent></mycomponent></slot>",
})
当(“/something”{
标题:“某物”,
模板:“”,
})
假设您要覆盖mycomponent的ui部分,只需为“插槽”定义一个组件。之前有一个routeProvider。否则。不确定它是否仍然受支持。我打的电话太少了。让我知道它是如何运行的。UI路由器支持,这意味着如果组件不存在,它能够触发错误 AngularJS目前不提供组件路由器。这意味着使用
$compile
将路由模板
编译为任何其他模板,并且忽略未知选择器
可以修补ngRoutengView
指令,以额外检查预期路由到组件的路由是否已编译
// the whole list can be retrieved from commonly available sources
var htmlTags = ['p', 'div', ...];
app.directive('ngView', function () {
return function($scope, $element, $attrs) {
if (!DEBUG_MODE)
return;
if ($element.children().length !== 1)
return;
var routeComponent = angular.element($element.children()[0]);
var routeComponentTagName = routeComponent.prop('tagName').toLowerCase();
if (htmlTags.indexOf(routeComponentTagName) >= 0)
return;
var routeComponentName = $attrs.$normalize(routeComponentTagName);
if (!routeComponent.controller(routeComponentName)) {
console.warn(routeComponentTagName + ' element is non-standard yet not a component');
}
}
});
AngularJS已经有了,它主要用于属性和带一些特定前缀,但只要组件名称没有x
或data
前缀,它就可以作为通用的烤肉串到骆驼盒转换器
可能还有其他方法可以检测组件是否在子元素上编译。如果已经存在父级routeComponentName
component,则上述代码将触发假阴性,因为controller()
在层次结构中向上移动
处理这个问题的正确方法是为应用程序提供测试覆盖率。与路由器相关的案例应该在集成或e2e测试中处理。因此,我浪费了很多时间进行调试。我也很想知道。我希望它能用
严格di
设置触发。这不是关于捕获所有路由。那很好。这种情况下,它与路由匹配,但模板本身有未定义的内容。@CAPTNCAIG那里也有一个通配符。同样,现在也帮不上忙,但它类似于(path*)。如果这不见鬼,请告诉我,等我有时间的时候我会深入挖掘。虽然这看起来很方便,但我目前的使用案例是,我刚刚将一个相当大的应用程序转换为使用webpack和显式导入以及其他风格,现在我要追踪我没有完全正确移植的组件。也许你可以grep并将这些结果与注册的组件进行比较