在一个组件中包含许多不同组件的应用程序中,我有一个自定义自动建议框.如果用户点击自动建议框(或包含自动建议框的元素)的任何位置,则应关闭该框.
这就是我在jQuery中要做的事情:
$(document).on('click','body',function(e) {
if(e.target!='.suggestbox' && $(e.target).parent('.suggestbox').length <1 ) {
$('.suggestbox').remove();
}
});
但是在我的Angular Dart模板中,我有:
index.html的:
<body>
<my-app>
// sub component
// sub sub component
</my-app>
</body>
我可以想到在my-app组件中检测到最顶层包装器上的点击并将操作发送到子组件但是这仍然不是主体点击的可能性.
解决这个问题的最佳方法是什么？
如果路由器具有子组件，如何共享变量并通过绑定保持变量更新？
这是我的代码（的一部分）：
app_component.dart：
import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
import 'package:angular2/router.dart';
import 'package:my_app/profile_component/profile_component.dart';
import 'package:my_app/login_component/login_component.dart';
@Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [
ROUTER_DIRECTIVES,
materialDirectives,
LoginComponent,
ProfileComponent
],
providers: const [
ROUTER_PROVIDERS,
const Provider(LocationStrategy, useClass: HashLocationStrategy),
materialProviders
],
)
@RouteConfig(const [
const Route(path: 'home', name: 'Home', component: HomeComponent, useAsDefault: true),
const Route(path: 'profile', name: "User Profile", component: ProfileComponent)
])
class AppComponent {
@ViewChild('login')
LoginComponent loginComponent;
@ViewChild('profile')
ProfileComponent profileComponent;
bool get isUserLoggedIn => loginComponent.isUserLoggedIn;
}
app_component.html：
<nav>
<ul>
<li *ngIf="!isUserLoggedIn"> …Relativ和Dart的新手我有以下问题:
my_component.dart:
import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
import 'package:google_maps/google_maps.dart';
import 'dart:html';
@Component(
selector: 'google-route-map',
styleUrls: const ['my_component.css'],
templateUrl: 'my_component.html',
directives: const [materialDirectives],
providers: const [materialProviders],
)
class MyComponent {
MyComponent() {
var m = querySelector("#my-canvas");
print (m); // is null
// do something with m....
}
}
my_component.html:
<div id="my-canvas"></div>
据我所知,问题是querySelector查询只有基本dom而不是shadowDom.
但是,如何在模板中查询id？
感觉像一个愚蠢的问题，但我不明白。如何在Angular 2 Dart模板中进行快速字符串连接？
我的组件有一个单独的html文件，可以说my_component.html：
作品：
....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...
作品：
....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...
不起作用：
....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...
不起作用：
....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...
尝试在此处的文档中找到答案（https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators），但是没有运气。
当然，我可以*ngIf在有条件输出的每个元素上使用，但是有没有办法进行简单的字符串连接？
嘿，我对Dart Futures还是陌生的，我有以下情况。
每当用户在UI中键入字母时，addressChanged()都会调用ui_component中的方法。此方法调用getProposals()我的地图componenet中的方法，该方法向google maps API发出异步请求。结果到这里后，我想将它们返回到UI组件，该组件将填充UI中的propasals下拉列表。
我陷入了最后一步：如何（以及最好的方法）将异步回调函数的结果返回给父组件（同时保留可重用的map组件？）。
这是我尝试过的：
1）UI_Component：
// I get called if a user typed a new letter
Future addressChanged(dynamic event) async {
String id = event.target.id;
String address = event.target.value;
if(id=="pickup") {
this.pickup = address;
} else if(id=="destination") {
this.destination = address;
}
// this is where I call the subcomponent and want to get the address propasals
String proposals = await googleMap.getProposals(address,id);
print(proposals);
populateProposalDropdown();
}
2）Google Map组件：
Future getProposals(String address,String id) async { …我的 Angular 2 Dart 应用程序有许多嵌套组件。如果我的组件之一的某个属性设置为 true，则会显示一个弹出窗口。
如果显示此弹出窗口，我想向文档正文添加一个类。
伪代码示例：
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
原因很简单：如果显示弹出组件，我想禁用正文滚动 ( overflow-x:hidden;)。bool show_popup如果其中的属性popup_component.dart设置为 true，则会显示弹出组件。
不幸的是，在 CSS 中 - 据我所知 - 没有选择器来检查这个（是否有 CSS 父选择器？） - 否则我会说类似的话
body:has(.my_popup)
在 main.css 文件或类似的文件中。
我怎样才能达到预期的结果？
dart ×6
angular-dart ×4
angular ×3
asynchronous ×1
css ×1
dart-async ×1
dart-html ×1
events ×1