Блог

Я использую ввод формы начальной загрузки, чтобы позволить пользователю передавать некоторый текст. Как мне сохранить этот текст и использовать его в качестве параметра в функции?

Вот мой HTML:

 <!--Directory Input Form-->
<div class="row">
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">Directory</span>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
</div>

<!--Convert Button-->
<div class="panel-body">
    <button type="button" class="btn btn-primary" (click)="convert(inputString);">Convert</button>
</div>
  

Как вы можете видеть, у меня есть вызов метода с именем convert(inputString), который принимает строковый параметр (convert(string s) реализован в моей папке TypeScript). Я поместил ‘inputString’ внутри метода, чтобы лучше проиллюстрировать свой вопрос, хотя я знаю, что у меня нет идентификатора для inputString где-либо еще. Это правильный способ сделать это — создать идентификатор с именем inputString и связать его с текстом, который вводит пользователь? Если да, то как мне это сделать?

Вы должны привязать <input> к [(ngModel)] .

 <!--Directory Input Form-->
<div class="row">
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">Directory</span>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" [(ngModel)]="basicUrl" name="basicUrl">
    </div>
</div>

<!--Convert Button-->
<div class="panel-body">
    <button type="button" class="btn btn-primary" (click)="convert(inputString);">Convert</button>
</div>
  

Теперь вы можете ссылаться basicUrl на свой файл controller.ts.

basicUrl: string;

Кроме того, не забудьте импортировать FormsModule app.module.ts .

 import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        // Angular 2
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
  

https://angular.io/docs/ts/latest/guide/forms.html