Question

我有一个界面（ option.ts ）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="ericWood.css">
  <script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
  <script src="ericWood.js"></script>
  <style>
    body {
         height:1150px;
         width:1280px;
    }

    #advertising {
         background:olive;
         width:20%;
         height:1000px;
         float:right;
    }

    #sidebar {
         height:1000px;
    }

    #footer {
         height:50px;
         width:1280px;
         background:black;
         text-align:center;
         clear:both;
    }

    p {
         font-size: 22pt;
    }

    #content {
         text-align:center;
    }
  </style>
</head>
<body>
  <header> 
  <div id="header" id="png"><span id="someId"><h1>Eric Thomas Wood</h1></span></div>
      <h3>Today is <span id = "dtField"></span>
      </h3>
  </header>
<div id="sidebar"><h2>About me</h2>
    <nav>
        <details>
            <summary>Page Content</summary>
                <ul>
                    <li>
                        <p>Please click <a href="dioPage2.html">Nikki</a> to learn about my lovely wife Nikki</p>
                    </li>
                    <li>
                        <p>Please click <a href="dioPage3.html">Rachel and Bekah</a> to learn about my awesome children</p>
                    </li>
                    <li>
                        <p>Please click <a href="dioPage4.html">Nick and Savanna</a> to learn about my amazing stepchildren</p>
                    </li>
                    <li>
                        <p>Please click <a href="dioPage4.html">Bubba and Lexi</a> to learn about our pets</p>
                    </li>
                    <li>
                        <p>Please click <a href="dioPage4.html">More Eric</a> to for more about me</p>
                    </li>
                </ul>
        </details>
    </nav>
</div>
<div id="content">
    <p>My name is Eric Wood! I am first and formost a family man, a husband and father of four wonderful children. As with most 
    people I am sure, I have evolved and adapted to life's challenges in my 37 short years. I am a musician at heart as I played 
    trombone for over ten years and was quite good at it. Music is what I first went to college for until I managed to earn a
    position with the post office and started a family. Fast forward a failed marriage, two wonderful girls, and losing my career
    job, I am remarried with an additional two stepchildren, an amazing wife, and I am enrolled at University of Phoenix about to
    complete my IT degree. Life has been hard at times but the future looks amazing.</p>
</div>
<div id="advertising">
    <audio id = "audioTrack">
        <source src = "howBlueCanYouGet.mp3" type = "audio/mpeg">
        <source src = "howBlueCanYouGet.ogg" type = "audio/ogg">
        Your browser does not support the audio element.
    </audio>
    <div id = "controls">
        <progress></progress>
        <div id = "buttons" style = "padding:5px;">
            <a href = "#" id = "play">Play</a>
            <a href = "#" id = "pause">Pause</a>
            <a href = "#" id = "stop">Stop</a>
        </div>
        <input type="range" min="0" max="100" value="0" id="setLocation"/>
    </div>
</div>
<script>
    $("audio").on('timeupdate', function(evt){
        var duration = evt.target.duration;
        var current = evt.target.currentTime;
    $('progress').val(current/duration);
});

    $('#play').click(function(evt) {
        evt.preventDefault();
    $("audio")[0].play();
});

    $('#pause').click(function(evt) {
        evt.preventDefault();
    $("audio")[0].pause();
});

    $('#stop').click(function(evt) {
        evt.preventDefault();
    $("audio")[0].currentTime = 0;
    $("audio")[0].pause();
});

    $('#setLocation').change(function(evt) {
        var val = $(evt.target).val();
        var duration = $("audio")[0].duration;
        var location = duration*(parseInt(val)/100);
    $("audio")[0].currentTime = location;
    $("audio")[0].play();
});
</script>
<div id="footer"><strong>Copyright &copy 2016</strong></div>

</body>
</html>

然后我导入我的组件（ form-select.component.ts ）：

export interface Option {
  label: string;
  model: any;
}

现在我想使用这个接口来确保从另一个组件传递给我的select组件的import {Component, Input, Output, EventEmitter} from 'angular2/core'; import {Option} from './option'; @Component({ selector: 'form-select', templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html', styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'], inputs: [ 'options', 'callback', 'model', 'label' ] }) export class FormSelectComponent { @Input() model: any; @Output() modelChange: EventEmitter = new EventEmitter(); isOpen: boolean = false; toggle() { this.isOpen = !this.isOpen; } close() { this.isOpen = false; } select(option, callback) { this.model = option.model; this.modelChange.next(this.model); callback ? callback() : false; } }格式正确并且具有正确的类型。 [options]必须是这样的数组：

[options]

每个索引对象将使用options = [ {label: 'Hello world', model: 1}, {label: 'Hello universe', model: 2}, {label: 'Hello honey boo boo', model: 3} ]接口，但我该怎么做？我记得在组件类中使用Option的行，但我不确定如何将Option[]与接口一起使用，然后将其传递给视图（或者你应该这样做做它）。

我怎样才能做到这一点？

Answer 1

你可以<form-select [options]="options"></form-select>。但它在运行时没有任何影响，因为javascript中没有对接口进行运行时检查检查this question和this one以及其他许多内容。

所以，如果你只是这样输入：

options

您无法确保输入Option正在实现options接口，因为该值实际上是在运行时传递的。

但是，如果您要将值分配给this.options = someOptions;，请执行以下操作：

someOptions

然后，IDE将显示错误消息，指出Option[]不是options类型。但这只是在编译/开发时。

那么，用接口输入变量是不是没有意义？

我实际上认为这是一种很好的做法。至少，您可以使代码更具可读性。但是，只要确保将正确的接口输入{{1}}，就没有必要使用接口。

如何使用接口来确保Angular 2中组件输入的正确格式？

1 个答案: