我正在使用Angular.dart作为应用程序框架,并尝试使用Twitters Bootstrap组件和CSS进行样式设置.我几乎立即遇到了一个问题,因为Bootstrap似乎没有处理ShadowDOM,而Angular.dart使用ShadowDOM进行组件.
这基本上意味着我无法使用Bootstrap.js构建Angular组件.使用仅需要CSS的Bootstrap组件可以applyAuthorStyles: true在NgComponent注释中正常工作.
有没有办法使用bootstrap js组件构建angular.dart组件？
/的Cenk
这是代码的简化版本,即使生成的HTML看起来很好,我也会记录错误.这个例外是什么意思？我为什么要这个？
index.html:
<!DOCTYPE html>
<div ng-app main>
<div ng-repeat="a in ctrl.listOfA">
<strong>{{ a }}</strong>
<div ng-repeat="b in ctrl.listOfB(a)">
{{ b }}
</div>
</div>
</div>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
main.dart:
import 'package:angular/angular.dart'; /* 0.9.10 */
@NgController(selector: '[main]', publishAs: 'ctrl')
class MainController {
final listOfA = new List.generate(2, (i) => 'a$i');
listOfB(a) => new List.generate(2, (i) => 'b$i').map((e) => '$a-$e');
}
void main() {
ngBootstrap(module: new Module()
..type(MainController)
);
}
记录的错误:
Observer reaction functions should not change model.
These …mods的免责声明:这并没有要求就最佳方式提出意见,这就要问一个方法,如何解决这个问题.
让我们想象一下,我想为我的项目编写一个材质设计风格按钮组件.(我知道,这已经可以使用,但这仅用于说明目的.)
我将按钮组件设置为正常的dart库项目,它工作正常.现在我想在另一个angular2 app中使用这个材质按钮组件,所以我将它添加到pubspec.yaml并将其作为指令依赖项插入到我的新app-component中.
问题是,如何从外部更改此按钮的悬停颜色？
由于我的组件应该使用样式封装(模拟样式),因此不能简单地全局设置样式.
这在理论上是好的,然而,它们尚未在所有浏览器中发货,并且没有生产就绪的垫片.为此,有人会在组件内部定义自定义css属性并在外部设置它们的值.
只需为应更改的样式提供我的按钮组件输入属性.这确实有效,但仅适用于那些不包含css伪选择器的样式,例如:hover,因为它无法更改:每个javaScript都悬停样式,因此也不是dart.有人可以在javascript/dart中编写:hover函数来允许这种样式更改,但这看起来很糟糕,因为它只是复制了css引擎中的可用代码.
这个适用于本机阴影dom,因为组件内部的样式链接标记由按钮组件的customCssPath属性填充,会将样式正确加载到组件中.但是,由于shadowdom在所有浏览器中都不是原生的,因此我们无法可靠地使用它.所以我们现在被迫使用模拟封装.
如果路由器具有子组件，如何共享变量并通过绑定保持变量更新？
这是我的代码（的一部分）：
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"> …for(int i=0; i<10; i++) {
priceValue.add(54.99 + i*5);
print(54.99 + i*5);
}
结果:
js_primitives.dart:30 54.99
js_primitives.dart:30 59.99
js_primitives.dart:30 64.99000000000001
js_primitives.dart:30 69.99000000000001
js_primitives.dart:30 74.99000000000001
js_primitives.dart:30 79.99000000000001
js_primitives.dart:30 84.99000000000001
js_primitives.dart:30 89.99000000000001
js_primitives.dart:30 94.99000000000001
js_primitives.dart:30 99.99000000000001
是什么导致00000000001出现？
我目前正在为我的下一个项目寻找一个Web框架,由于某些原因,我对角镖感兴趣.
但与此同时,我希望我的webapp遵循PWA指南.
我搜索了很多,但我还没有在angulardart中找到PWA的例子.我看到了JS对应的一些例子或者发现了pwadart包,但是我缺乏angulardart框架的知识来知道它是否可能在dart中.
那么,是否有可能在angulardart中制作PWA？
环境：
我想知道在 VM 的服务器端部署和运行 AngularDart 应用程序需要什么。
在开发过程中正在使用pub run build_runner server. 该应用程序是通过localhost:8080浏览器访问的，它运行良好。
为了准备部署，使用命令生成构建pub run build_runner build -r -o build。文件正在build目录 ok上生成。
正在使用 Google Cloud Compute 创建 VM。
以下是基本疑惑：
build生成的包复制到服务器端的 Web Server 中？不需要额外配置吗？有人可以指点我一些教程或提供有关如何在 Dart 中创建图表/流程图的示例代码片段吗？简单的情况是有几个元素可以相互连接，并且可以读取哪个元素在何处连接。有大量 JS 示例，但出于学习目的，我想采用 Dart 方式:)
I do AngularDart development on Windows 10. I'm getting strange behavior with webdev recently. I have to run webdev like this:
C:\Users\galankus>C:\tools\dart-sdk\bin\pub.bat global run webdev
A tool to develop Dart web projects.
Usage: webdev <command> [arguments]
Global options:
-h, --help Print this usage information.
Available commands:
build Run builders to build a package.
help Display help information for webdev.
serve Run a local web development server and a file system watcher that re-builds on changes.
Run "webdev help <command>" for …客户端.js
async function callClientAsyncFuncWithResult () {
let result = await someService.request();
return result;
}
页面.dart
import 'dart:js' as js;
var result = js.context.callMethod('callClientAsyncFuncWithResult');
//I want to do something like var result = await js.context.callMethod('callClientAsyncFuncWithResult');
在 AngularDart 中，您如何在继续执行 dart 之前等待客户端 javascript Promise 返回结果？现在它只是流过调用，我已经尝试将 callMethod 的结果设置为 Future 或 Promise 并且它从不等待。
我不认为我的实现是正确的。我怎样才能做到这一点？