飞镖 – 聚合物铁Flex Mixin不起作用,但是类

发布时间：2020-12-15 01:45:20 所属栏目：百科来源：网络整理

导读：我使用类在我的AngularDart组件中使用Polymer iron-flex-layout.由于它会产生弃用警告,我认为会尝试推荐的替代方案：mixin’s.它们不起作用. 目前,我在artist_component.dart中有这个导入： import 'package:polymer_elements/iron_flex_layout.dart'; 我也

我使用类在我的AngularDart组件中使用Polymer iron-flex-layout.由于它会产生弃用警告,我认为会尝试推荐的替代方案：mixin’s.它们不起作用.

目前,我在artist_component.dart中有这个导入：

import 'package:polymer_elements/iron_flex_layout.dart';

我也尝试将其添加到我的index.html

<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">

这与使用凉亭的文档中给出的示例不同.在我的artist_component.html中,我有：

<style is="custom-style">
  .container {
   @apply(--layout-horizontal);
  }
  .flexchild {
    @apply(--layout-flex-3);
  }
  .flexchild-2 {
    @apply(--layout-flex-9);
  }
</style>
<section class="container">
  <section class="flexchild gutter">
...

我已经尝试将导入放在index.html和我的主css文件中以及没有影响的样式.鉴于课程有效,你会认为mixim也是如此.

解决方法

我一直在挖掘,我找到了答案.我还发现该方法已被弃用.我的pubspec定义了这些版本：

polymer: ^1.0.0-rc.17
polymer_elements: ^1.0.0-rc.8

我很确定解决方案是将这行代码添加到我的index.html：

<link rel="import" href="packages/polymer/polymer.html">

我不肯定这是唯一的要求是因为我一直在改变很多东西才能让它发挥作用.这是我完整的index.html：

<!DOCTYPE html>
<html>
<head>
<title>Jazz Cat</title>
<script>
  window.Polymer = window.Polymer || {};
  window.Polymer.dom = 'shadow';
</script>

<!-- For testing using pub serve directly use: -->
<base href="/">
<!-- For testing in WebStorm use: -->
<!-- <base href="/dart/web/"> -->

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">
<link href="master.css" rel="stylesheet" type="text/css" />
<style is="custom-style">
  .container {
    @apply(--layout-horizontal);
  }
  .element-index {
    @apply(--layout-flex-3);
  }
  .element-body {
    @apply(--layout-flex-9);
  }
  .element-main {
    @apply(--layout-flex-7);
  }
  .element-sidebar {
    @apply(--layout-flex-2);
  }
</style>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<my-app>Loading...</my-app>
</html>

现在我开始工作,我将把我的样式移到一个单独的文件中.这是我使用mixin类的文件之一：

<section class="container">
<section class="element-index">
<h1>{{title}}</h1>
  <paper-listbox class="scroll-list" (click)="onScroll()">
    <paper-item class="item-height" *ngFor="let artist of artists" [class.selected]="artist == selectedArtist" (click)="onSelect(artist)">
      {{artist.first_name}} {{artist.last_name}}
    </paper-item>
  </paper-listbox>
<paper-button (click)="gotoDetail()">Detail</paper-button>
<!--<paper-icon-button icon="refresh" (click)="gotoDetail()"></paper-icon-button>-->
  <!--<button (click)="gotoDetail()">View Details</button>-->
</section>
<section class="element-body">
<div *ngIf="selectedArtist != null">
  <h2>{{selectedArtist.first_name}} {{selectedArtist.last_name}}</h2>
  <!--<section class="layout horizontal">-->
  <section class="container">
    <section class="element-main">
      <!--<dl class="justified">
        <dt>Instrument:</dt><dd>{{ selectedArtist.primary_instrument }} </dd>
        <dt>Other:</dt><dd>{{ selectedArtist.other_instruments }}</dd>
        <dt>Birth:</dt><dd>{{ selectedArtist.birth_year }}</dd>
        <dt>Death:</dt><dd>{{ selectedArtist.death_year }}</dd>
      </dl>-->
      <h3>Notes</h3>
      <p>{{ selectedArtist.notes }}</p>
      <h3>Recordings</h3>
      <table class="index">
        <th>Date</th>
        <th>Title</th>
        <th>Leader</th>
        <tr *ngFor="let credit of artist_credits" >
          <td class="tableDate">{{ credit.recording_date | date:'d MMM yyyy' }}</td>
          <td>{{ credit.title }}</td>
          <td>{{ credit.first_name }} {{ credit.last_name}}</td>
        </tr>
      </table>
    </section>
    <section class="element-sidebar">
      <dl class="narrow-list">
        <dt>Instrument</dt><dd>{{ selectedArtist.primary_instrument }} </dd>
        <dt>Other</dt><dd>{{ selectedArtist.other_instruments }}</dd>
        <dt>Birth</dt><dd>{{ selectedArtist.birth_year }}</dd>
        <dt>Death</dt><dd>{{ selectedArtist.death_year }}</dd>
      </dl>
    </section>
  </section>
</div>
</section>
</section>

基于this question的答案,已经为聚合物1.1创建了一种新方法,并且已经弃用了这种方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!