Показать простой компонент AngularDart

Я начинаю изучать Dart/AngularDart и пытаюсь отобразить простой компонент, следуя инструкциям на 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>

Web / компоненты / запись / 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;
  }
}

Web / компоненты / запись / 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>
Источник

1 ответ

Решение

  • Вы должны выполнить обновление паба из контекстного меню на pubspec.yaml.

  • Атрибуты ng-model в web/components/post/post.html являются избыточными.

  • PostComponent(String text, String userName, DateTime date){
    этот код недействителен
    Либо вы регистрируете класс в своем модуле, который можно внедрить в конструктор, либо вы используете аннотации, чтобы иметь возможность внедрять примитивные типы, такие как String, int, double,... (Если вы хотите узнать, как вводить примитивные типы или использовать аннотации для внедрения, см. Раздел Как можно вводить зависимости на основе типа и имени с помощью AngularDart?

Источник
Другие вопросы по тегам