首页 文章

显示一个简单的AngularDart组件

提问于
浏览 次
0

我'am starting to learn Dart/AngularDart and i'正在尝试按照https://angulardart.org/中的教程显示一个简单的组件，我的问题是我有一个空白页面没有显示任何内容 . 这是我的代码：

网络/ nasiha.dart

import 'dart:html';
import 'package:angular/angular.dart';
import 'components/post/post.dart';
import 'dart:mirrors';

class MyAppModule extends Module {
  MyAppModule() {
    type(PostComponent);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}

网络/ nasiha.html

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Nasiha</title>
    <link rel="stylesheet" href="css/nasiha.css">
  </head>
  <body>
     <post></post>
    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="nasiha.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

网络/组件/后/ post.dart

import 'package:angular/angular.dart';

@NgComponent(
    selector: 'post',
    templateUrl:'components/post/post.html',
    cssUrl: 'components/post/post.css',
    publishAs: 'cmp_post'
)
class PostComponent {
  String text= "This is a simple text to show";
  String userName = "test";
  DateTime date= new DateTime.now();

  PostComponent(String text, String userName, DateTime date){
    this.text = text;
    this.userName = userName;
    this.date = date;
  }

  String getText(){
    return this.text;
  }
  void setText(String text){
    this.text = text;
  }
  DateTime getDate(){
    return this.date;
  }
  void setDate(DateTime date){
    this.date = date;
  }
  String getUserName(){
    return this.userName;
  }
  void setUserName(String userName){
    this.userName = userName;
  }
}

网络/组件/后/ post.html

<div>
  <p ng-model="cmp_post.post_text">
  {{cmp_post.text}}
  </p>
  <div ng-model="cmp_post.post_date">
  {{cmp_post.date}}
  </div>
  <div ng-model="cmp_post.post_username">
  {{cmp_post.userName}}
  </div>
</div>
dart angular-dart

1 回答

  • 1

    • 您应该从pubspec.yaml上下文菜单中执行pub upgrade .

    • web / components / post / post.html中的ng-model属性是多余的 .

    • PostComponent(String text, String userName, DateTime date){
      此代码无效 .
      您可以在模块中注册一个可以注入构造函数的类，或者使用注释来注入基本类型，如 String ， int ， double ，...（如果您想知道如何注入基元类型或使用注释注射见How can I Dependency Inject based on type and name, with AngularDart?

    回复于

相关问题